css3 animation（动画）属性

css3   animation（动画）属性

1.animation: name duration timing-function delay iteration-count direction fill-mode play-state（所有属性集合）
2.animation-name属性值：绑定动画名（@keyframes名）
3.animation-duration属性值：time。（5s）

4.animation-timing-function属性值: 

• linear--------速度均匀（默认）
• ease-------低速加快变慢
• ease-in-------低速开始
• ease-out--------低速结束
• ease-in-out-------低速开始结束
• cubic-bezier(n,n,n,n)-------0-1数值自己定义

5.animation-delay属性值：time。（5s）

6.animation-iteration-count属性值：

• n-------次数（默认1次）
• infinite-------无限（永远）

7.animation-direction属性值:

• normal-------正常播放
• reverse-------反向播放
• alternate-------奇数次正向播，偶数次反向播
• alternate-reverse-------奇数次反向播，偶数次正向播
• initia-------默认属性
• inherit-------从父级继承 

8.animation-play-state属性值：

• paused-------暂停
• running-------正在运行

 配合@keyframes使用

语法如下

//1.也可以写成这样

@keyframes mymove

{

   from { top: 0px ;}

   to { top: 200px ;}

}

//2.也可以写成这样

@keyframes mymove

{

   0% { top: 0px ;}

   25% { top: 200px ;}

   50% { top: 100px ;}

   75% { top: 200px ;}

   100% { top: 0px ;}

}

小例子：（以改变宽度为例）

.div1 {

     width: 20px ;

     height: 20px ;

     margin: 100px auto ;

     background: #ccc ;

   animation: mymove 5s ;

  

    

  }

/* 规定动画。 */

@keyframes mymove

{

   0% { width: 20px ;}

   25% { width: 200px ;}

   50% { width: 100px ;}

   75% { width: 200px ;}

   100% { width: 20px ;}

}