学习animation的时候,就已经看到这个属性了,但是没有详细钻研,今天突然碰到,详细了解一下,仅仅自己学习的过程,如有错误,请各位指正。谢谢。
animation-fill-mode
属性规定动画在播放之前或之后,其动画效果是否可见。
animation-fill-mode
共有四个属性值,分别为:none
、forwards
、backwards
、both
。
注:IE9-不支持此属性。
仅仅看上面,很难理解。下面详细解释。
首先我们要了解动画按照执行时间可以分为三个状态:动画执行前(动画延迟)、动画执行中、动画执行后。了解了状态,我们逐个值看。
示例代码:
<div class="test">
<span class="mode1">none</span>
<span class="mode2">forwards</span>
<span class="mode3">backwards</span>
<span class="mode4">both</span>
</div>
.test span{
display: block;
width: 100px;
height: 100px;
font-size: 14px;
color: #000;
line-height: 100px;
text-align: center;
border-radius: 100%;
background: #ac2aef;
animation-name: move;
animation-duration: 3s;
animation-delay: 1s;
animation-timing-function: ease-in;
}
.mode1{animation-fill-mode: none;}
.mode2{animation-fill-mode: forwards;}
.mode3{animation-fill-mode: backwards;}
.mode4{animation-fill-mode: both;}
@keyframes move{
0%{
background: #FFFA90;
transform: translateX(0) scale(1);
}
100%{
background: #4cd826;
transform: translateX(200px) scale(0.5);
}
}
上述动画我们有延迟1s,可以观察动画执行前的状态。
注意:动画执行方向是0%到100%执行。
从上面的图我们可以看出,动画执行中四个值的状态是一致的,区别在动画执行前和执行后。
当值为none时
none
为默认值,在动画执行前和动画执行后,对元素的样式不会产生影响。
从上图可以看到,值为none时,动画执行前和执行后的状态和无动画的状态是一致的,动画执行前和执行后对元素没有产生任何样式影响。动画执行后跳到无动画状态。
当值为forwards时
forwards
当使用这个值时,告诉浏览器:动画结束后,元素的样式将设置为动画的最后一帧的样式。
从上图可以看出,值为forwards时,动画执行前的状态和无动画状态一致,但是动画执行后状态却不一样,查看动画效果,你会发现他的状态和动画最后一帧的状态相同。
当值为backwards时
从CSS样式可以看到,动画我们有设置延迟1s,为了便于观察动画执行前的状态。
backwards
当使用这个值时,告诉浏览器:动画开始前,元素的样式将设置为动画的第一帧的样式。
从上图可以看出,值为backwards时,动画执行前的状态和无动画状态 不一致,可以看出,它的状态和动画第一帧相同,但是动画执行后状态却和无动画时的状态相同。
当值为both时
both
当使用这个值时,告诉浏览器:同时使用forwards和backwards两个属性值的效果。
从上图可以看出,动画执行前是动画第一帧的效果,动画执行后是动画最后一帧的效果。
最后animation-fill-mode
的状态和animation-direction
的值有关。
1、当animation-direction
为normal
或 alternate
时,和上面的状态相同。
2、当animation-direction
为alternate-reverse
或reverse
时,状态刚好和上面相反。从100%到0%执行。
本文参考网址:
https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html
https://www.sitepoint.com/understanding-css-animation-fill-mode-property/