CSS3中使用动画，核心是@keyframes规则和animation 属性。@keyframes用于定义动画动作，animation属性指定使用哪个动画，及动画时间。
实例一：

1. <style>
   
2. div
   
3. {
   
4.     width:100px;
   
5.     height:100px;
   
6.     background:red;
   
7.     animation:myfirst 5s;
   
8.     -moz-animation:myfirst 5s; /* Firefox */
   
9.     -webkit-animation:myfirst 5s; /* Safari and Chrome */
   
10.     -o-animation:myfirst 5s; /* Opera */
    
11. }
    
12. @keyframes myfirst {  from {background:red;}  to {background:yellow;}  }
    
13. @-moz-keyframes myfirst /* Firefox */
    
14. { from {background:red;}  to {background:yellow;} }
    
15. @-webkit-keyframes myfirst /* Safari and Chrome */
    
16. {  from {background:red;}  to {background:yellow;}  }
    
17. @-o-keyframes myfirst /* Opera */
    
18. {  from {background:red;}  to {background:yellow;}  }
    
19. </style>
    
20. 
    
21. <div></div>

复制代码

CSS3中使用动画，核心是@keyframes规则和animation 属性。@keyframes用于定义动画动作，animation属性指定使用哪个动画，及动画时间。
实例一：

1. <style>
   
2. div
   
3. {
   
4.     width:100px;
   
5.     height:100px;
   
6.     background:red;
   
7.     animation:myfirst 5s;
   
8.     -moz-animation:myfirst 5s; /* Firefox */
   
9.     -webkit-animation:myfirst 5s; /* Safari and Chrome */
   
10.     -o-animation:myfirst 5s; /* Opera */
    
11. }
    
12. @keyframes myfirst {  from {background:red;}  to {background:yellow;}  }
    
13. @-moz-keyframes myfirst /* Firefox */
    
14. { from {background:red;}  to {background:yellow;} }
    
15. @-webkit-keyframes myfirst /* Safari and Chrome */
    
16. {  from {background:red;}  to {background:yellow;}  }
    
17. @-o-keyframes myfirst /* Opera */
    
18. {  from {background:red;}  to {background:yellow;}  }
    
19. </style>
    
20. 
    
21. <div></div>

复制代码