閱讀(17.5k) 書簽贊(3) 我要糾錯(cuò)

CSS3 animation 屬性

2018-11-10 17:58 更新

CSS3 animation（動(dòng)畫）屬性

使用簡寫屬性把 animation 綁定到一個(gè)<div> 元素：

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

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

屬性
animation	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-

默認(rèn)值:	none 0 ease 0 1 normal
繼承:	no
版本:	CSS3
JavaScript 語法:	object.style.animation="mymove 5s infinite"

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	說明
animation-name	指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration	動(dòng)畫指定需要多少秒或毫秒完成
animation-timing-function	設(shè)置動(dòng)畫將如何完成一個(gè)周期
animation-delay	設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。
animation-iteration-count	定義動(dòng)畫的播放次數(shù)。
animation-direction	指定是否應(yīng)該輪流反向播放動(dòng)畫。
animation-fill-mode	規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。
animation-play-state	指定動(dòng)畫是否正在運(yùn)行或已暫停。
initial	設(shè)置屬性為其默認(rèn)值。閱讀關(guān)于 initial的介紹。
inherit	從父元素繼承屬性。閱讀關(guān)于 initinherital的介紹。