hooyantsing's Blog

P237_29_animation-fill-mode动画填充模式详解

字数统计: 144阅读时长: 1 min
2020/04/25

P237 29 animation-fill-mode动画填充模式详解

animation-fill-mode

动画填充模式。

normal

默认,动画开始前和结束后均用元素默认样式。

1
animation-fill-mode: normal;

backwards

动画开始前用动画的第一帧(0%),动画结束后用元素默认样式。

1
animation-fill-mode: backwards;

forward

动画开始前用元素默认样式,动画结束后用动画的最后一帧(100%)。

1
animation-fill-mode: forward;

both

动画开始前用动画的第一帧(0%),动画结束后用动画的最后一帧(100%)。

相当于backwards + forward。

1
animation-fill-mode: both;
CATALOG