CSS3 animation-direction 屬性

CSS 參考手冊 CSS 參考手冊


實例

先執(zhí)行一遍動畫，然后再反向執(zhí)行一遍動畫：

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

嘗試一下 ?

瀏覽器支持

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

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

屬性          
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 屬性定義是否循環(huán)交替反向播放動畫。

注意：如果動畫被設(shè)置為只播放一次，該屬性將不起作用。

默認值： normal
繼承： 否
可動畫化： 否。請參閱 可動畫化（animatable）。
版本： CSS3
JavaScript 語法： object.style.animationDirection="reverse"嘗試一下

CSS 語法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

屬性值

值 描述 測試
normal 默認值。動畫按正常播放。測試 ?
reverse 動畫反向播放。測試 ?
alternate 動畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。測試 ?
alternate-reverse 動畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。測試 ?
initial 設(shè)置該屬性為它的默認值。請參閱 initial。  
inherit 從父元素繼承該屬性。請參閱 inherit。  

相關(guān)文章

CSS3 教程：CSS3 動畫（Animations）


CSS 參考手冊 CSS 參考手冊