如何使用CSS3 动画属性
在网页当中，我们常常用到各种的动画效果，我们要让网页具备这些动画效果就要进行一定的属性配置，这就是很多CSS动画属性的由来。
操作方法
- 01
@keyframes。有了这样的一个动画属性的语句，我们就能够在网页当中实现一个图像的动画效果。 @keyframes mymove { from {top:0px;} to {top:200px;} }
- 02
不同的浏览器不同的代码设计。有的时候，我们针对不同的浏览器要进行不同的代码设计。 @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} }
- 03
CSS3 animation 属性。使用了这样的一个属性之后，你的动画能够与相对应的元素进行一一绑定。 div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}
- 04
为动画赋予一个名称。为了达到这样的一个效果，我们使用animation-name语句。div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}
- 05
animation-duration语句。 这个语句主要用来规定动画运转一次的时间周期的。div { animation-duration:2s; -webkit-animation-duration:2s; /* Safari 和 Chrome */}
- 06
animation-timing-function。通过这样的一个语句来呈现网页当中的动画运动的速率变化，匀速或者变速。div { animation-timing-function:2s; -webkit-animation-timing-function:2s; /* Safari 和 Chrome */}