个回答

• qq_莳萝泡菜_03359237

  2016-12-08 12:22:21

  先提个问题，怎样查看animation-fill-mode中none和backwards的不一样。
  

  首先设置代码如下（添加一个div块，作为对比，并且改变div块相关属性，如默认的background背景色、动画延迟animation-delay、animation-fill-mode），并且执行代码，能看到效果。

  html：
  <div class="div1">1</div>
  <div class="div2">2</div>
  css3：
  .div1 {
    background: orange;
    animation-delay: 5s;
    animation-fill-mode: backwards; 
  }
  .div2{
    background: orange;
    animation-delay: 5s;
    animation-fill-mode: none; 
  }

  解释：backwards（动画开始时，迅速应用动画的初始帧），none（动画完成时，反转到初始帧），设置的初始帧是orange橘色。点击提交，div1背景色迅速应用动画的初始帧red红色，div2背景色仍停留在初始帧橘色orange。

  重点！！backgrounds所指初始帧为动画的初始帧(RED)，none所指初始帧为div块原本的初始帧（ORANGE）。

  1

• 深山小童

  2016-07-04 00:13:10

  当你添加animation-delay时间后，就会不一样了，backwards表示在animation-delay这段时间里应用初始帧0%的状态。

  0

• 姗姗1234

  2016-05-20 17:43:50

  其实没有区别

  0