閱讀(5k) 書簽贊(1) 我要糾錯

HTML DOM Style animation 屬性

2018-08-04 20:40 更新

Style animation 屬性

使用速記屬性改變 <div> 元素的動畫：

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

animation 屬性是六個動畫屬性的速記屬性：

animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection.

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

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

Safari 和 Chrome 支持另一個可替代該屬性的屬性，即 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)鍵幀的名稱。
animationDuration	規(guī)定動畫完成需花費的秒數(shù)或毫秒數(shù)。
animationTimingFunction	指定動畫的速度曲線。
animationDelay	規(guī)定動畫開始的延遲時間。
animationIterationCount	規(guī)定動畫的播放次數(shù)。
animationDirection	規(guī)定是否循環(huán)交替反向播放動畫。
animationFillMode	規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。
animationPlayState	規(guī)定動畫是運行的還是暫停的。
initial	設(shè)置該屬性為它的默認值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

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