CSS3 animation-direction 屬性

CSS 參考手冊 CSS 參考手冊


實例

先執行一遍動畫,然後再反向執行一遍動畫:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */


流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。

屬性
animation-direction 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-

定義和用法

animation-direction 屬性定義是否迴圈交替反向播放動畫。

注意:如果動畫被設置為只播放一次,該屬性將不起作用。

默認值: normal
繼承:
可動畫化: 否。請參閱 可動畫化(animatable)
版本: CSS3
JavaScript 語法: object.style.animationDirection="reverse"


CSS 語法

animation-direction: 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


相關文章

CSS3 教學:CSS3 動畫(Animations)


CSS 參考手冊 CSS 參考手冊