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;}
}