Skip to main content

animation-fill-mode

Try it

CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

语法

/* Single animation */
animation-fill-mode: none; // 默认值:动画将不会将任何样式应用于目标
animation-fill-mode: forwards; // 目标将保留由执行期间遇到的最后一个关键帧计算值。
animation-fill-mode: backwards; // 动画将在应用于目标时立即应用第一个关键帧中定义的值
animation-fill-mode: both; // 动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;