#animation-fill-mode

#介绍

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

#使用示例

css-apisrc/animation-fill-mode/App.tsx

Code

预览

#语法

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

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

#取值

#none

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元件的 CSS 规则来显示该元件。这是默认值。

#forwards

动画结束时将最后一个关键帧的值设置给 View。最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值：

#backwards

动画开始时将第一个关键帧的值设置给 View。第一个关键帧取决于 animation-direction 和 animation-iteration-count 的值：

#both

动画将遵循 forwards 和 backwards 的规则，从而在动画开始与结束时将相应关键帧设置给 View。

#形式定义

#形式语法

/*none*/
animation-fill-mode: none | forwards | backwards | both;

#扩展阅读

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• CSS animation event
• Animated API

#兼容性