CSS animation-direction 屬性

定義和用法

animation-direction 屬性定義是否應該輪流反向播放動畫。

如果 animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向后播放。

注釋：如果把動畫設置為只播放一次，則該屬性沒有效果。

另請參閱：

CSS3 教程：CSS 動畫

HTML DOM 參考手冊：animationDirection 屬性

實例

暫停動畫：

div {
  animation-direction: alternate;
}

親自試一試

CSS 語法

animation-direction: normal|alternate;
值 描述 測試
normal 默認值。動畫應該正常播放。 測試
alternate 動畫應該輪流反向播放。 測試

技術細節

默認值： normal
繼承性： no
版本： CSS3
JavaScript 語法： object.style.animationDirection="alternate"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit-、-moz- 或 -o- 的數字表示使用前綴的首個版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-