4回答

• 

  qq_自强不息_8

  2016-12-27 10:56:18

  已采纳

  backwards不是决定最终样式的，它表示元素应用动画时是否立即应用动画的初始帧，forwards表示动画执行完后停止在最后一帧的位置，最后一帧是什么样式，结果就是什么样式，明白？
  

  1 0

  小黍

  大概懂了，forwards是表示动画执行完后停在最后一帧,就是最后一个镜头，不管是位置还是样式，backwards是决定在 animation-delay 所指定的一段时间后，在动画显示之前，应用第一帧设置的属性也就是0%时的设置。所以两者不矛盾，就相当于拍视频一个是告诉你视屏一开始应该在什么地方摆什么样的pose,一个是告诉最后应该出现在哪个地方做什么，不知道我这样描述是否正确，和你有没理解到一个点

  2016-12-27 18:00:51

  共 1 条回复 >

• 

  JoKer49

  2017-04-24 21:38:01

  @keyframes redToBlue{

    from{

      background: red;

    }

    20%{

        background:green;

    }

    40%{

        background:lime;

    }

    60%{

        background:yellow;

    }

    to{

      background:blue;

    }

  }

  .div1 {

    width: 50px;

    height: 50px;

    background: orange;

    margin: 20px auto;

    animation-name:redToBlue;

    animation-duration: 5s;

    animation-timing-function: ease;

    animation-delay: 2s;

    animation-fill-mode: none; 

  }

  
  

  .div2 {

    width: 50px;

    height: 50px;

    background: orange;

    margin: 20px auto;

    animation-name:redToBlue;

    animation-duration: 5s;

    animation-timing-function: ease;

    animation-delay: 2s;

    animation-fill-mode: forwards; 

  }

  .div3 {

    width: 50px;

    height: 50px;

    background: orange;

    margin: 20px auto;

    animation-name:redToBlue;

    animation-duration: 5s;

    animation-timing-function: ease;

    animation-delay: 2s;

    animation-fill-mode: backwards; 

  }

  .div4 {

    width: 50px;

    height: 50px;

    background: orange;

    margin: 20px auto;

    animation-name:redToBlue;

    animation-duration: 5s;

    animation-timing-function: ease;

    animation-delay: 2s;

    animation-fill-mode: both; 

  }

  自己去感受  四个div 四个class

  0 0
• 

  qq_自强不息_8

  2017-01-02 15:05:42

  嗯，你这次描述的很正确！！

  0 0
• 

  qq_自强不息_8

  2016-12-23 18:04:25

  设置为both，包括设置了forwards和backwards，如果设置了forwards就会在动画执行完后停止在最后一帧上，由于最后一帧是蓝色，所以执行结果就是蓝色。

  2 0

  Victor... 回复小黍

  backwords不是执行完回到第一帧 是动画开始前提前放到第一帧 这样动画就能迅速开始运行， 默认才是结束回到第一帧

  2018-06-22 15:02:17

  共 2 条回复 >