个回答

• qq_自强不息_8

  2016-12-27 10:56:18

  已采纳

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

  0

• 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

• qq_自强不息_8

  2017-01-02 15:05:42

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

  0

• qq_自强不息_8

  2016-12-23 18:04:25

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

  0