CSS3 animation-direction 屬性

CSS 參考手冊(cè) CSS 參考手冊(cè)


實(shí)例

先執(zhí)行一遍動(dòng)畫(huà)，然后再反向執(zhí)行一遍動(dòng)畫(huà)：

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

嘗試一下 ?

瀏覽器支持

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

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

屬性          
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)交替反向播放動(dòng)畫(huà)。

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

默認(rèn)值： normal
繼承： 否
可動(dòng)畫(huà)化： 否。請(qǐng)參閱 可動(dòng)畫(huà)化（animatable）。
版本： CSS3
JavaScript 語(yǔ)法： object.style.animationDirection="reverse"嘗試一下

CSS 語(yǔ)法

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

屬性值

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

相關(guān)文章

CSS3 教程：CSS3 動(dòng)畫(huà)（Animations）


CSS 參考手冊(cè) CSS 參考手冊(cè)