閱讀(4.9k) 書(shū)簽贊(1) 我要糾錯(cuò)

HTML DOM Style animation 屬性

2018-08-04 20:40 更新

Style animation 屬性

使用速記屬性改變 <div> 元素的動(dòng)畫(huà)：

document.getElementById("myDIV").style.animation="mymove 5s infinite";

animation 屬性是六個(gè)動(dòng)畫(huà)屬性的速記屬性：

animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection.

注意：總是規(guī)定 animationDuration 屬性，否則持續(xù)時(shí)間為 0，將不播放動(dòng)畫(huà)。

Internet Explorer 10、Firefox 和 Opera 支持 animation 屬性。

Safari 和 Chrome 支持另一個(gè)可替代該屬性的屬性，即 WebkitAnimation 屬性。

注意：Internet Explorer 9 及其之前的版本不支持 animation 屬性。

返回 animation 屬性：

object.style.animation

設(shè)置 animation 屬性：

object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState"

值	描述
animationName	指定要綁定到選擇器的關(guān)鍵幀的名稱(chēng)。
animationDuration	規(guī)定動(dòng)畫(huà)完成需花費(fèi)的秒數(shù)或毫秒數(shù)。
animationTimingFunction	指定動(dòng)畫(huà)的速度曲線(xiàn)。
animationDelay	規(guī)定動(dòng)畫(huà)開(kāi)始的延遲時(shí)間。
animationIterationCount	規(guī)定動(dòng)畫(huà)的播放次數(shù)。
animationDirection	規(guī)定是否循環(huán)交替反向播放動(dòng)畫(huà)。
animationFillMode	規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。
animationPlayState	規(guī)定動(dòng)畫(huà)是運(yùn)行的還是暫停的。
initial	設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱 initial。
inherit	從父元素繼承該屬性。請(qǐng)參閱 inherit。

默認(rèn)值：	none 0 ease 0 1 normal none running
返回值：	字符串，表示元素的 animation 屬性。
CSS 版本	CSS3