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

文章目录

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

animation-fill-mode:forwards;

属性介绍

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

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

语法

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中的frome0%的样式)第一帧中的样式,在这个示例中,球体变成蓝色。然后在1s时间之后,元素动画效果和之前一样。

both

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

 

原创文章:CSS3动画结束状态animation-fill-mode ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/animation-fill-mode.html)
评论已关闭。