css3 animation详解 CSS3 animation-duration 属性

css3 animation详解

CSS3 animation是CSS3中新增的一种动画效果，它可以让元素在指定的时间内以指定的方式进行动画变化。它可以让元素在指定的时间内以指定的方式进行动画变化，而不需要使用JavaScript或Flash。

CSS3 animation有两个重要的属性：animation-name和animation-duration。animation-name属性用于指定动画名称；animation-duration属性用于指定动画执行时间。此外，还有一些其他常用的属性：animation-delay、animation-iteration-count、animation-direction、animation-timing-function等。

.box { 
    animation: mymove 5s infinite; 
    -webkit-animation: mymove 5s infinite;   
} 
@keyframes mymove { 
    from {top:0px;} 
    to {top:200px;} 
} 
@-webkit-keyframes mymove  { 
    from {top:0px;} 
    to {top:200px;} 
}  											   

上面代码中，使用@keyframes声明了一个名为mymove的动画；使用animation属性将mymove动画应用到.box元素上；使用@-webkit-keyframes声明Safari和Chrome浏览器特有的动画。

CSS3 animation-duration 属性

animation-duration: time;