animation-fill-mode

版本：CSS3

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

示例

/* 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：目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：

  animation-direction	animation-iteration-count	last keyframe encountered
  normal	even or odd	100%orto
  reverse	even or odd	0%orfrom
  alternate	even	0%orfrom
  alternate	odd	100%orto
  alternate-reverse	even	100%orto
  alternate-reverse	odd	0%orfrom

• backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：

  animation-direction	first relevant keyframe
  normaloralternate	0%orfrom
  reverseoralternate-reverse	100%orto

• both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com