CSS @keyframe动画轻松

Question

我试图使一个动画轻松元素的原始值后，悬停。动画本身运行良好，但是当我悬停在元素之外时，它会立即恢复到原来的状态，而我希望有一个0.2s 轻松的。有什么帮助吗？

这是我的密码：

img.footer {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        animation-timing-function: ease-out; /*this is what i have tried*/
        -webkit-animation-timing-function: ease-out; /*this is what i have tried*/
    }
    @keyframes flash {
        0%   {
            filter: grayscale(1);
            -webkit-filter: grayscale(1);
        }
        6%   {
            filter: grayscale(0) brightness(1.2);
            -webkit-filter: grayscale(0) brightness(1.2);
        }
        33%, 100%   {
            filter: grayscale(0) brightness(1);
            -webkit-filter: grayscale(0) brightness(1);
        }
    }
    img.footer:hover {
        animation-name: flash;
        animation-duration: 0.999s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out; /*this is what i have tried*/
        -webkit-animation-timing-function: ease-out; /*this is what i have tried*/
    }

工作样品

Answer 1

一种方法是将其应用于起始和结束状态的转换效果，其中非悬停css是所需的初始状态和从悬停状态的转换：

img.footer {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-transition:all 0.2s ease;
    -webkit-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
img.footer:hover {
  filter: grayscale(0) brightness(1.2);
  -webkit-filter: grayscale(0) brightness(1.2);
  -moz-transition:all 0.999s ease;
    -webkit-transition:all 0.999s ease;
    -ms-transition:all 0.999s ease;
    -o-transition:all 0.999s ease;
    transition:all 0.999s ease;
}

对这种方法的唯一警告是，您不能指定中间灰度值或亮度值(如果您不希望线性转换)。