1. /***** transition 和 animation ******/  
2. transition  /** 是页面元素的过渡效果，如鼠标划上旋转、变成等 **/  
3. animation   /** 则是动画组，直接指向了动画关键帧，animation-name 对应 @keyframes neme{}  **/  
4.   
5.   
6. animation-name          /** 动画名称 **/  
7. animation-duration      /** 动画的时间 **/  
8. animation-timing-function   /** 设置动画的过渡类型，一般去linear线性过渡 **/  
9. animation-delay         /** 设置延时时间 **/  
10. animation-iteration-count   /** 动画循环次数默认为1 ，infinite为无限循环 **/  
11. animation-direction     /** 动画的方向分为正反，normal为正alternate反 **/  
12. animation-play-state        /** w3c正在考虑是否将该属性移除，你建议使用！ **/  
13. animation-fill-mode             /** 默认值为：none，设置forwards时停留在最后一帧; **/  
14.   
15.   
16. /***** animation缩写：*****/  
17. /*******************************************************************/  
18. animation:name 1s linear 5s forwards; /*** 定义在随着一帧 ***/  
19.   
20. animation:name 1s linear 5s infinite; /*** 一直循环动画 ***/  
21.   
22. animation:mymove 1s linear 5s infinite forwards; /*** 错误的 ***/  
23.   
24. /*** infinite 和 forwards 不可同时定义 ***/  
25. /**********************************************************************/  
26.   
27.   
28. @-webkit-keyframes name{  
29.     from {  }  
30.     to {  }  
31. }  
32. @-o-keyframes name{  
33.     from {  }  
34.     to {  }  
35. }  
36. @-moz-keyframes name{  
37.     from {  }  
38.     to {  }  
39. }  
40. @keyframes name{  
41.     from {  }  
42.     to {  }  
43. }  

timing-function 作用于每两个关键帧之间，而不是整个动画