平时会用 animation 实现动画效果,之前一直没有留意 animation-fill-mode 中 forwards 和 both 动画的区别,今天自己动手实现了一下,终于搞懂了。
animation-fill-mode 属性可以接受 none | forwards | backwards | both 四个值中的一个,接下来分别简单介绍一下每个值的效果。
mode | 效果 |
---|---|
none | 不改变默认行为 |
forwards | forwards当动画完成后,保持最后一帧的状态(也就是最后一个关键帧中定义的状态) |
backwards | 在animation-delay指定动画延迟的一段时间内,元素保持为第一帧中的状态(也就是第一帧中所定义的状态) |
both | 表示上面两者模式都被应用 |
在HTML中有如下代码:
<div class='circle'><div>
CSS属性:
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
animation: move 3s linear 2s none;
}
@keyframes move {
0% {
transform: translateX(0);
background: #000;
}
100% {
transform: translateX(300px);
background: red;
}
}
最开始不设置 div 背景色,且延迟 1s 执行动画。将 animation 中 animation-fill-mode 属性分别设为 none | forwards | backwards | both ,可以得到如下效果:
mode | 效果 |
---|---|
none | div 最开始看不见,1s 后出现黑色圆形并向右移动300px,div颜色从黑色变成红色,之后又消失看不见 |
forwards | div 最开始看不见,1s 后出现黑色圆形并向右移动、颜色从黑色变成红色,之后停留在结束位置(最后一个关键帧中定义的状态) |
backwards | div 最开始是黑色圆形(第一帧中所定义的状态),1s 后向右移动、颜色从黑色变成红色,之后消失看不见 |
both | div 最开始是黑色圆形(也就是第一帧中所定义的状态),1s 后向右移动、颜色从黑色变成红色,之后停留在结束位置(最后一个关键帧中定义的状态) |
语言很苍白,所以新增了gif图
none:
forwards:
backwards:
both:
综上现象所述,如果动画无延迟,forwards 和 both 表现出来的效果是相同的;在有延迟的时候表现出来的效果才会不同,forwards 和 both 结束效果相同(停留在最后一个关键帧中定义的状态),开始时 both 会应用 backwards(第一帧定义的状态) 的效果。