首页 > 代码库 > CSS3 animation 属性

CSS3 animation 属性

定义和用法:
animation 属性是一个简写属性,用于设置六个动画属性:

animation-name       规定需要绑定到选择器的 keyframe 名称。。
animation-duration       规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function     规定动画的速度曲线。
animation-delay       规定在动画开始之前的延迟。
animation-iteration-count     规定动画应该播放的次数。
animation-direction      规定是否应该轮流反向播放动画。

用法:animation:  name   duration   timing-function   delay   iteration-count   direction;

默认值:      none     0       ease         0       1       normal

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。


继承性: no
版本: CSS3

简写:animation :  mymove   5s   infinite;
JavaScript 语法: object.style.animation="mymove 5s infinite"

 

实例:将动画arrowing绑定div,然后使用css3  @keyframes 规则,在 @keyframes 中规定某项 CSS 样式,创建由当前样式逐渐改为新样式的动画效果。

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

@keyframes arrowing {
0% {transform: translateY(-5px);opacity: 0.8;}
50% {transform: translateY(10px);opacity: 1;}
100% {transform: translateY(-5px);opacity: 0.8;}
}
@-webkit-keyframes arrowing {          /* Safari and Chrome */
0% {-webkit-transform: translateY(-5px);opacity: 0.8;}
50% {-webkit-transform: translateY(10px);opacity: 1;}
100% {-webkit-transform: translateY(-5px);opacity: 0.8;}
}

 

浏览器支持:

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

 

CSS3 animation 属性