css动画样式（css动画（animation）常用属性）

1.animation-name：动画名称

 2.@keyframes：动画定义           ，后面跟动画名称

3.animation-duration：动画持续时长
  
 
  
 
  
 
  
 
  
 
 ，单位（s）

 4.animation-delay:动画延时生效










，单位（s）；可为负值 
  
  
  
  
  ，当为负值时候
  
  
  
  
  
 ，应解读为已播放n秒

      如：-2s表示动画已播放2s
 


 


 


 


 


，从2s后开始播放

 5.animation-iteration-count：动画运行次数 
 
 
 
 
 ，参考值有：infinite（无限循环）

 6.animation-direction：动画运行方向规则：参考值有：

    ① normal（正常播放
   
   
   
   
   
 ，默认值）
 

 

 

 

 

，

    ② reverse （反向） 

 

 

 

 

 ，

    ③ alternate （先正向           ，后反向

 
 

 
 

 
 

 
 

 
 

，交替）









，

    ④ alternate-reverse（先反向                 ，后正向
 
 
 
 
 
 
 
 
 
 
，交替）

  7.animation-timing-function：动画运行曲线















，参考值有：

      ① ease ：慢-快-慢

      ② linear ：匀速运动

      ③ ease-in：慢进

      ④ ease-out：慢出

      ⑤ ease-in-out ：慢进慢出    

      ⑥ cubic-bezier(n,n,n,n)：用贝塞尔函数自定义动画运行曲线                                

8.animation-fill-mode：动画填充模式：

     ① none :默认值           ，不应用任何样式

     ② forwards ：应用动画最后一个关键帧的样式值

     ③ backwards：应用动画第一个关键帧的样式值
  
 
  
 
  
 
  
 
  
 
 ，并在动画延迟期间保留该值
  
  
  
  
  
。

     ④ both 动画会同时遵循向前和向后的规则










，从而在两个方向上扩展动画属性

9.animation-play-state：动画运行或者暂停

    ① paused：暂停

    ② running：播放

10.animation：集合6种动画简写属性 
  
  
  
  
  ，顺序：动画名称
  
  
  
  
  
 ，运行时长
 


 


 


 


 


，运行曲线 
 
 
 
 
 ，延时
   
   
   
   
   
 ，运行次数
 

 

 

 

 

，运行方向规则