CSS animation 屬性

定義和用法

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

另請參閱：

CSS3 教程：CSS 動畫

HTML DOM 參考手冊：animation 屬性

實例

使用簡寫屬性，將動畫與 div 元素綁定：

div
{
animation:mymove 5s infinite;
}

親自試一試

CSS 語法

animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name 規定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規定動畫的速度曲線。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫。
animation-fill-mode 規定動畫在執行時間之外應用的值。
animation-play-state 規定動畫是正在運行還是暫停。

技術細節

默認值： none 0 ease 0 1 normal
繼承性： no
版本： CSS3
JavaScript 語法： object.style.animation="mymove 5s infinite"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit-、-moz- 或 -o- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-