animation-fill-mode属性的理解

<style>
.qiu1,.qiu2,.qiu3,.qiu4{
      width: 150px;
      height: 50px;
      margin: 50px;
      background-color: rgb(17, 226, 28);
    }
    .qiu1{
      animation: tiao1 1s linear 3s;
      animation-fill-mode: none;
    }
    .qiu2{
      animation: tiao1 1s linear 3s;
      animation-fill-mode: forwards;
    }
    .qiu3{
      animation: tiao1 1s linear 3s;
      animation-fill-mode: backwards;
    }
    .qiu4{
      animation: tiao1 1s linear 3s;
      animation-fill-mode: both;
    }
     @keyframes tiao1 {
      from{
        transform: translateX(50px);
        background-color: rgb(41, 22, 206);
      }
      to{
        transform: translateX(200px);
        background-color: rgb(41, 22, 206);
      }
    }

</style>
<div class="qiu1"></div>
<div class="qiu2"></div>
<div class="qiu3"></div>
<div class="qiu4"></div>

动画等待阶段

在动画等待阶段，none、forwards保持的还是元素最初始的状态，而backwards和both保留的是动画第一帧的状态。

动画执行过程中

从上图可看出，动画执行过程中的状态都是一样的。所以，区别在于动画等待阶段和动画结束后。

动画结束后

动画结束后，none、backwards回到了最初始状态，forwards、both保留的是动画最后一帧的状态。

所以，总结一下animation-fill-mode用法：
animation-fill-mode：控制动画执行前和执行后的状态。
一个动画过程可分为动画等待、动画执行、动画结束，默认情况下，只有动画执行阶段才会触发@keyframes中声明的动画。
- animation-fill-mode：none；
-默认值。在设置了动画延迟情况下(设置延迟的目的是为了区分在动画等待阶段的差异)，在动画等待阶段，保留的是元素最初始的状态，动画结束后，仍然回到元素最初始的状态。
- animation-fill-mode: forwards;
- 在设置了动画延迟情况下，动画等待阶段，保留的是元素最初始的状态，动画结束后，保留最后一帧的状态
- animation-fill-mode: backwards;
- 在设置了动画延迟情况下，在动画等待阶段，保留的是动画第一帧(from或者0%)的状态或者最后一帧(当使用了 animation-direction: reverse;)的状态。动画结束后，回到的是元素最初始状态。
- animation-fill-mode: both;
- 在设置了动画延迟情况下，在动画等待阶段，保留的是动画第一帧(from或者0%)的状态或者最后一帧(当使用了 animation-direction: reverse;)的状态。动画结束后，保留最后一帧的状态。可以看出，是forwards和backwards的结合。

animation-fill-mode使用案例：

.qiu5{
      width: 100px;
      height: 50px;
      background-color: rgb(172, 79, 25);
      animation: tiao5 .6s ease;
      //ease:动画速率的默认值，低速开始、变快、低速结束
      //ease-in:低速开始（慢到快）
      //ease-out:低速结束（快到慢）
      //ease-in-out:低速开始、低速结束（两头慢、中间快）
    }
    @keyframes tiao5 {
      from{
        transform: translateX(-200px);
      }
      to{
        transform:translateX(0px);
      }
    }
    .qiu6{
      width: 100px;
      height: 50px;
      background-color: rgb(236, 123, 16);
      animation: tiao6 .5s ease-out 1s;
       /* animation-fill-mode: backwards; */
      /* 或者下面的代替backwards */
      transform: scale(0);
      animation-fill-mode: forwards;
    }
    @keyframes tiao6 {
      from{
        transform: scale(0) ;
      }
      to{
        transform:scale(1) ;
      }

<div class="qiu5"></div>
<div class="qiu6"></div>

最后编辑于：2020.10.06 13:03:55