animation-fill-mode控制CSS3动画结束状态

分享一篇文章

原文链接：http://caibaojian.com/animation-fill-mode.html

css3 animation状态结束后可以通过animation-fill-mode 控制动画的最后状态，分别是不改变默认行为、保持最后一个属性和回到第一帧。

假如我们就想让一个元素从一个点，按照弧形，运动到另外一个点，然后就在另外那个点的地方停止。默认CSS3动画运行完毕是会回到起点，但CSS3 animation里面有一个属性，可以改变这个结束的状态，使其停留在结束的状态。·

animation-fill-mode:forwards;

属性介绍

animation-fill-mode它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟(animation-delay)，并且按正常方向（animation-direction）执行的动画（正常方向是指normal也就是指动画从0%运行到100%的动画）。动画按执行时间来划分，它分为三个过程，或者说一次动画过程可以将元素划分为三个状态：动画等待、动画进行和动画结束。默认情况之下，只有在动画进行状态，才会应用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。

animation-fill-mode属性可以接受none、forwards、backwards或者both四个值中的一个值。接下来分别来解释每个值对其影响。

语法

//code from http://caibaojian.com/animation-fill-mode.html
animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

属性详解

none

animation-fill-mode取值为none并不是你想要的东西。记住，取值为none时，使用得动画不会对动画等待和动画完成的元素样式产生改变。

forwards

现在你可以看到使用animation-fill-mode:forwards;的效果。当使用这个值时，告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式。

backwards

和forwards效果不一样，如果设置为backwards值，那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式。

从技术上讲，每一个动画都有一个默认的延迟时间，只不过这个时间是0而以，所以你并没有看到其中的变化。根据前面对backwards的描述：动画等待的那段时间内，元素的样式将设置为动画第一帧的样式。这样解释你就应该较为明白，因为我们的示例有一个1s时间的延迟，这样一来，元素在等待的这1s时间内，元素的样式就是关键帧(也就是@keyframes中的frome或0%的样式)第一帧中的样式，在这个示例中，球体变成蓝色。然后在1s时间之后，元素动画效果和之前一样。

both

最后来看一下animation-fill-mode取值为both的效果。这个值将会告诉浏览器同时应用forwards和backwards两个属性值的效果。言外之意，animation-fill-mode取值为both值时，animation-fill-mode相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。