# CSS3 animation 属性 ## 实例 使用简写属性，将动画与 div 元素绑定： ``` div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。 ## 定义和用法 animation 属性是一个简写属性，用于设置六个动画属性： * animation-name * animation-duration * animation-timing-function * animation-delay * animation-iteration-count * animation-direction 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。 | 默认值： | none 0 ease 0 1 normal | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 语法： | _object_.style.animation="mymove 5s infinite" | | --- | --- | ## 语法 ``` animation: _name_ _duration_ _timing-function_ _delay_ _iteration-count_ _direction_; ``` | 值 | 描述 | | --- | --- | | _[animation-name](/cssref/pr_animation-name.asp "CSS3 animation-name 属性")_ | 规定需要绑定到选择器的 keyframe 名称。。 | | _[animation-duration](/cssref/pr_animation-duration.asp "CSS3 animation-duration 属性")_ | 规定完成动画所花费的时间，以秒或毫秒计。 | | _[animation-timing-function](/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 属性")_ | 规定动画的速度曲线。 | | _[animation-delay](/cssref/pr_animation-delay.asp "CSS3 animation-delay 属性")_ | 规定在动画开始之前的延迟。 | | _[animation-iteration-count](/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 属性")_ | 规定动画应该播放的次数。 | | _[animation-direction](/cssref/pr_animation-direction.asp "CSS3 animation-direction 属性")_ | 规定是否应该轮流反向播放动画。 | ## 相关页面 CSS3 教程：[CSS3 动画](/css3/css3_animation.asp "CSS3 动画")