# 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 動畫")