CSS3animation-direction屬性

CSS 參考手冊CSS 參考手冊


實例

先執行一遍動畫，然后再反向執行一遍動畫：

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

瀏覽器支持

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

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

屬性     
animation-direction43.0
4.0 -webkit-		10.016.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 參考手冊