閱讀(33k) 書簽贊(1) 我要糾錯(cuò)

CSS3 animation-direction 屬性

2022-06-02 14:24 更新

定義和用法

animation-direction：屬性控制如何在reverse或alternate周期播放動(dòng)畫。

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

注釋：如果把動(dòng)畫設(shè)置為只播放一次，則該屬性沒有效果。

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

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

值	描述	測(cè)試
normal	以正常的方式播放動(dòng)畫	測(cè)試
reverse	以相反方向播放動(dòng)畫
alternate	播放動(dòng)畫作為正常每奇數(shù)時(shí)間（1,3,5等）和反方向每偶數(shù)時(shí)間（2,4,6，等...）	測(cè)試
alternate-reverse	在每個(gè)奇數(shù)時(shí)間（1,3,5等）在相反方向上播放動(dòng)畫，并且在每個(gè)偶數(shù)時(shí)間（2,4,6等等）的正常方向上播放動(dòng)畫

暫停動(dòng)畫：

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

嘗試一下 ?

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

Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 屬性。

Safari 和 Chrome 支持替代的 -webkit-animation-direction 屬性。

注釋：Internet Explorer 9 以及更早的版本不支持 animation-direction 屬性。