如何使用CSS3 动画属性

1、@keyframes。有了这样的一个动画属性的语句，我们就能够在网页当中实现一个图像的动画效果。

@keyframes mymove{from {top:0px;}to {top:200px;}}

2、不同的浏览器不同的代码设计。有的时候，我们针对不同的浏览器要进行不同的代码设计。

@-moz-keyframes mymove /* Firefox */

{

from {top:0px;}

to {top:200px;}

}

3、CSS3 animation 属性。使用了这样的一个属性之后，你的动画能够与相对应的元素进行一一绑定。

div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}

4、为动画赋予一个名称。为了达到这样的一个效果，我们使用animation-name语句。div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}

5、animation-duration语句。 这个语句主要用来规定动画运转一次的时间周期的。div{animation-duration:2s;-webkit-animation-duration:2s; /* Safari 和 Chrome */}

6、animation-timing-function。通过这样的一个语句来呈现网页当中的动画运动的速率变化，匀速或者变速。div{animation-timing-function:2s;-webkit-animation-timing-function:2s; /* Safari 和 Chrome */}