animation-fill-mode的一些思考

animation-fill-mode是css3动画的一个属性，它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟，并且按正常方向执行的动画（正常方向是指从0%运行到100%），执行一次的过程可以描述如下：

按照动画的执行时间来划分，一次动画过程可以将元素划分为3个状态：动画等待，动画进行和动画结束状态。默认情况下，只有在动画进行状态，才会应用动画的keyframes所定义的样式；而在动画等待和动画结束状态，不会对元素的样式产生影响。animation-fill-mode有四个值，分别是：

none：这是默认值，正是这个值，使得动画不会对动画等待和动画完成的元素样式产生改变；

backwards：如果设置为这个值，那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式；

forwards：如果设置为这个值，那么在动画结束后，元素的样式将设置为动画的最后一帧的样式；

both：相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。

通过下面的demo，可以感受下animation-fill-mode三个非none值的作用。

demo1：http://liuyunzhuge.github.io/blog/animation/dist/html/animation-fill-mode.html#demo1

效果如下：

less源码：

 #demo1  { 
  .target.animate {
    animation-name :  move_1 ; 
    animation-duration :  2s ; 
    animation-delay :  1s ; 

    &.target_1 {
      animation-fill-mode :  backwards ;
    } 
    &.target_2  { 
      animation-fill-mode :  forwards ;
    } 
    &.target_3  { 
      animation-fill-mode :  both ;
    } 
  }
}

@keyframes move_1  { 
  0% {
    transform :  translate(-50px, 0) ;
  } 

  50%  { 
    transform :  translate(0, 0) ;
  } 

  100%  { 
    transform :  translate(50px, 0) ;
  } 
}  

查看更多关于animation-fill-mode的一些思考的详细内容...