animation-fill-mode

介绍

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

标准化语法

//默认值none
animation-fill-mode: none | forwards | backwards | both;

1
2

样例：

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

1
2
3
4
5
6
7
8
9

取值

none

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

forwards

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

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

backwards

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

animation-direction	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both

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

与 Web 的区别

注意

animation仅支持对transform, background-color, opacity做动画

扩展阅读

注意事项

如果是动态设置的动画属性，需要在节点标记 flatten="false" 属性
如果 iOS 显示效果不符合预期，在节点标记 implicit-animation="false" 属性

# animation-fill-mode

# 介绍

# 标准化语法

# 取值

# none

# forwards

# backwards

# both

# 与 Web 的区别

# 扩展阅读

# 注意事项