一次搞懂 CSS3 animation动画中forwards和both的区别

平时会用 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（第一帧定义的状态） 的效果。