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*/
    }

Working sample

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;
}

这种方法的唯一警告是你不能指定中间灰度值或亮度值（如果你不想要线性过渡）。

CSS @keyframe动画缓出

1 个答案: