上篇日记，我简单介绍了css3中transition的使用，和自定义过渡中的贝塞尔曲线，效果已经很好了，但有一个比较明显的缺点就是还动画方面还不够强大，只能定义开始和结束的状态，如果我要详细控制多个阶段的动画效果，实现更多的效果应该怎么办呢，其实css3中年有专门为动画而设的属性：Animation（目前测试兼容chrome、firefox、ie10+）

Animation其实和flash中的动画差不多，有一个关键属性“keyframes”，用与定义不同阶段属性变化，下面用一个例子看看就知道了，核心代码：

1.  @keyframes bigBoy{ 
2.      0% { 
3.         margin-left: 0; width:35px; height:35px; line-height:35px; background:#f07709;   
4.      } 
5.      50% { 
6.         margin-left: 180px; width:70px; height:70px; line-height:50px; background:#c00;  
7.      } 
8.      100% { 
9.         margin-left: 360px; width:35px; height:35px; line-height:35px; background:#514bad;  
10.      } 
11.   } 
12.  
13. /* 兼容webkit内核 */ 
14.  @-webkit-keyframes bigBoy{ 
15.      0% { 
16.         margin-left: 0; width:35px; height:35px; line-height:35px; background:#f07709;   
17.      } 
18.      50% { 
19.         margin-left: 180px; width:70px; height:70px; line-height:50px; background:#c00;  
20.      } 
21.      100% { 
22.         margin-left: 360px; width:35px; height:35px; line-height:35px; background:#514bad;  
23.      } 
24.   } 
25.  
26. .demo:hover .box{  
27.  
28.      animation-name:bigBoy;/*动画属性名，也就是我们前面keyframes定义的动画名*/ 
29.      animation-duration: 2s;/*动画持续时间*/ 
30.      -webkit-animation-name:bigBoy;/* 兼容webkit内核 */ 
31.      -webkit-animation-duration: 2s;/* 兼容webkit内核 */ 
32.  
33. }