【CSS3】设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

例如：让动画停在最一帧处。代码如下：

 animation-fill-mode:forwards; 

如何区别这四个值呢？

假设background初始值为orange,且

@-webkit-keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

且

div {
  width: 200px;
  height: 200px;
  background: orange; 
  margin: 20px auto;
  -webkit-animation-name:redToBlue; 
  -webkit-animation-duration: 5s;  
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 3s; 
  -webkit-animation-fill-mode: both;    
}

 
 
将初始background设置为orange，姑且把这一帧叫做初始帧
动画里面的red为第一帧，blue为最后一帧。
将duration调为5s，将delay调为3s。
下面就可以开始试了：
1. none：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，跳回到初始帧orange。
2. forwards：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，留在最后一帧blue.
3. backwards : 也是从初始帧orange开始，但是由于会迅速应用动画的第一帧，这里延迟没有了，立马就闪到了第一帧red，这里再延迟3s。动画完成后，跳回到初始帧orange。
4. both：同时具有forwards和backwards效果，即拥有forwards动画结束留在最后一帧blue的效果，也拥有迅速应用动画的第一帧red的效果。这样both综合的效果为：从初始帧orange开始，迅速跳到第一帧red，然后变化到最后一帧blue结束，并留在最后一帧blue。