Style animationDirection 屬性

定義和用法

animationDirection 屬性設置或返回動畫是否應在交替循環中反向播放。

注釋：如果動畫設置為只播放一次，此屬性將無效。

實例

更改 <div> 元素的 animationDirection 屬性：

document.getElementById("myDIV").style.animationDirection = "reverse";

親自試一試

語法

返回 animationDirection 屬性：

object.style.animationDirection

設置 animationDirection 屬性：

object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"

屬性值

值 描述
normal 默認值。動畫應該正常播放。
reverse 動畫應該反向播放。
alternate 動畫將在每個奇數次（1、3、5 等）正向播放，并在每個偶數次（2、4、6 等...）反向播放。
alternate-reverse 動畫將在每個奇數次（1、3、5 等）反向播放，并在每個偶數次（2、4、6 等...）正向播放。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： normal
返回值： 字符串，表示元素的 animation-direction 屬性。
CSS 版本： CSS3

瀏覽器支持

animationDirection 是 CSS3 (1999) 特性。

所有瀏覽器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 11

相關頁面

CSS 參考手冊：animation-direction 屬性