樣式 animation 屬性
示例
使用簡寫屬性更改 <div> 元素的動畫
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
自己動手試一試 »
描述
animation 屬性是六個動畫屬性的簡寫屬性
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
注意:始終指定 animationDuration 屬性,否則持續時間為 0,動畫將永遠不會播放。
語法
返回 animation 屬性
object.style.animation
設定 animation 屬性
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
屬性值
值 | 描述 |
---|---|
animationName | 指定要繫結到選擇器的關鍵幀的名稱 |
animationDuration | 指定動畫完成所需的時間(秒或毫秒) |
animationTimingFunction | 指定動畫的速度曲線 |
animationDelay | 指定動畫開始前的延遲 |
animationIterationCount | 指定動畫應播放的次數 |
animationDirection | 指定動畫是否應在交替週期中反向播放 |
animationFillMode | 指定動畫在執行時間之外應用的值 |
animationPlayState | 指定動畫是正在執行還是已暫停 |
initial | 將此屬性設定為其預設值。閱讀關於 initial |
inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
預設值 | none 0 ease 0 1 normal none running |
---|---|
返回值 | 一個字串,表示元素的 animation 屬性 |
CSS 版本 | CSS3 |
瀏覽器支援
animation
是 CSS3 (1999) 功能。
所有瀏覽器都完全支援。
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 11 |
相關頁面
CSS 參考:animation 屬性