用CSS3产生动画效果

相关属性：

@keyframes规则：定义动画

语法：@keyframes animationname{keyframes-selector {CSS-style;}}

animationname:动画名称

keyframes-selector:动画持续百分比（0%~100%) from(表示0%） to(表示100%)

CSS-style:要设置的样式；

如定义一个名称为myanimation的动画:

@keyframes myanimation{

0% {font-size:10px;}

50% {font-size:30px;}

100% {font-size:100px;}}

animation属性：是以下属性的复合

animation-name:动画的名称

animation-duration:动画完成时间

aniamtion-timing-function:动画速度设置（linar/ease/ease-in/ease-out/ease-in-out)

animation-delay:动画在启动前的延迟间隔

animation-iteration-count:播放次数(n/infinite)

animation-direction:动画播放方向（normal/reverse

   doctype html  > 
   html  > 
   head  > 
   meta   charset  ="utf-8"   /> 
   style  >  
div  {  
width  :  400px  ;  
height  :  400px  ;  
background-color  :  grey  ; 
 }  
p  {  
color  :  red  ;  
animation  :  myanimation 10s infinite  ; 
 }  
@keyframes myanimation  {  
0% {font-size  :  10px  ;  }  
50%   {  font-size  :  30px  ;  }  
100%   {  font-size  :  100px  ;  }  
}
    style  > 
   head  > 

   body  > 
   div  > 
       p  > this is an animation   p  > 
   div  > 
   body  > 
   html  >  

查看更多关于用CSS3产生动画效果的详细内容...