animation-fill-mode
属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none
、forwards
、backwords
和both
。其四个属性值对应效果如下:
属性值 | 效果 |
none |
默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 |
forwards |
表示动画在结束后继续应用最后的关键帧的位置 |
backwards |
会在向元素应用动画样式时迅速应用动画的初始帧 |
both |
元素动画同时具有forwards 和backwards 效果 |
在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode
属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
例如:让动画停在最一帧处。代码如下:
animation-fill-mode:forwards;
实例演示:
实现元素背景色从红色变成蓝色。
HTML 代码:
<div></div>
CSS 代码:
@keyframes redToBlue{ from{ background: red; } 20%{ background:green; } 40%{ background:lime; } 60%{ background:yellow; } to{ background:blue; } } div { width: 200px; height: 200px; background: red; margin: 20px auto; animation-name:redToBlue; animation-duration: 20s; animation-timing-function: ease; animation-delay: 1s; animation-fill-mode: both; }
GIF 效果如下: