animation-fill-mode

老师，试了很多例子，但还是有点不太理解这几个属性的效果

backwards 在动画延时或未播放呈现动画开始的状态（第一帧）

但是动画未播放之前不就是本身的样子吗？

未来it界的一枚程序媛 2020-02-03

源自：CSS3动画 2-23 animation-fill-mode

收起

1回答

好帮手慕码 2020-02-03 11:29:52

同学你好，在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。如果这几个属性不太清楚的话，可以对比着来看下：

forwards和both使得第二个元素和第三个元素，在动画结束后仍然保持动画最后一帧的状态。而第一个元素没有。

backwards和both使得第一个元素和第三个元素，在动画添加后都立即变为动画第一帧的状态。而第二个元素没有应用第一帧的状态。

both 在动画开始之前,保持为第一帧状态,在动画结束后,保持为最后一帧的状态

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background: red;
      border: 1px solid green;
      margin: 10px;
    }
    .div1{
        animation:mood 1s linear 1s backwards;
    }
    .div2{
        animation:mood 1s linear 1s forwards;
    }
    .div3{
        animation:mood 1s linear 1s both;
    }
    @keyframes mood{
      0%{
        transform: translateX(-50px);
      }
       50%{
        transform: translateX(0px);
      }
       100%{
        transform: translateX(50px);
      }
    }
  </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>
</html>

同学可以测试下如上代码，通过效果来区分属性。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答