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

素颜马尾好姑娘i 2024-04-18 10:11 22阅读 0赞

平时会用 animation 实现动画效果，之前一直没有留意 animation-fill-mode 中 forwards 和 both 动画的区别，今天自己动手实现了一下，终于搞懂了。  
animation-fill-mode 属性可以接受 none | forwards | backwards | both 四个值中的一个，接下来分别简单介绍一下每个值的效果。

<table> 
 <thead> 
  <tr> 
   <th>mode</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>不改变默认行为</td> 
  </tr> 
  <tr> 
   <td>forwards</td> 
   <td>forwards当动画完成后，保持最后一帧的状态（也就是最后一个关键帧中定义的状态）</td> 
  </tr> 
  <tr> 
   <td>backwards</td> 
   <td>在animation-delay指定动画延迟的一段时间内，元素保持为第一帧中的状态（也就是第一帧中所定义的状态）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>表示上面两者模式都被应用</td> 
  </tr> 
 </tbody> 
</table>

在HTML中有如下代码：

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 ，可以得到如下效果：

<table> 
 <thead> 
  <tr> 
   <th>mode</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>div 最开始看不见，1s 后出现黑色圆形并向右移动300px，div颜色从黑色变成红色，之后又消失看不见</td> 
  </tr> 
  <tr> 
   <td>forwards</td> 
   <td>div 最开始看不见，1s 后出现黑色圆形并向右移动、颜色从黑色变成红色，之后停留在结束位置（最后一个关键帧中定义的状态）</td> 
  </tr> 
  <tr> 
   <td>backwards</td> 
   <td>div 最开始是黑色圆形（第一帧中所定义的状态），1s 后向右移动、颜色从黑色变成红色，之后消失看不见</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>div 最开始是黑色圆形（也就是第一帧中所定义的状态），1s 后向右移动、颜色从黑色变成红色，之后停留在结束位置（最后一个关键帧中定义的状态）</td> 
  </tr> 
 </tbody> 
</table>

**语言很苍白，所以新增了gif图**  
none:  
![在这里插入图片描述][20200808191548822.gif]  
forwards:  
![在这里插入图片描述][20200808191618559.gif]  
backwards:  
![在这里插入图片描述][20200808191640538.gif]  
both:  
![在这里插入图片描述][20200808191654553.gif]

**综上现象所述，如果动画无延迟，forwards 和 both 表现出来的效果是相同的；在有延迟的时候表现出来的效果才会不同，forwards 和 both 结束效果相同（停留在最后一个关键帧中定义的状态），开始时 both 会应用 backwards（第一帧定义的状态） 的效果。**

[20200808191548822.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9aebd5d10f75431bb4b14a60b97fea8e.gif
[20200808191618559.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d1bc2cbb36694da6ad5ff8d31907989d.gif
[20200808191640538.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/da781fbf42bf48948581beed8763150d.gif
[20200808191654553.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/aa5ee2b496034d509e7782a30d16f00a.gif