animation-direction，是用來檢索或設定對象動畫在循環中是否反向運動的方法。
簡介,示例,瀏覽器支持,定義和用法,語法,
簡介
animation-direction
語法：
animation-direction：normal | alternate [ , normal | alternate ]*
默認值：normal
取值：
normal：
正常方向
alternate：
正常與反向交替
說明：
檢索或設定對象動畫在循環中是否反向運動
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationDirection。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-direction
Gecko(Firefox)-moz-animation-direction
Presto(Opera)
Trident(IE)-ms-animation-direction
W3Canimation-direction
示例
h1 {
font - size: 16px;
}
div {
width: 100px;
height: 100px;
padding: 10px;
border - radius: 61px;
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
background: #F6D66E;
background: -moz - linear - gradient(top, #fff, #F6D66E);
background: -webkit - linear - gradient(top, #fff, #F6D66E);
background: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E); - moz - animation: animations 1.5s ease infinite alternate; - webkit - animation: animations 1.5s ease infinite alternate; - o - animation: animations 1.5s ease infinite alternate; - ms - animation: animations 1.5s ease infinite alternate;
animation: animations 1.5s ease infinite alternate;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
50 % { - webkit - transform: translate(100px, 100px);
}
100 % { - webkit - transform: translate(100px, 0);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
50 % { - moz - transform: translate(100px, 100px);
}
100 % { - moz - transform: translate(100px, 0);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
50 % { - o - transform: translate(100px, 100px);
}
100 % { - o - transform: translate(100px, 0);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
50 % { - ms - transform: translate(100px, 100px);
}
100 % { - ms - transform: translate(100px, 0);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
50 % {
ransform: translate(100px, 100px);
}
100 % {
transform: translate(100px, 0);abc
瀏覽器支持
Safari 和 Chrome 支持替代的 -webkit-animation-direction 屬性。Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation-direction 屬性。
定義和用法
animation-direction 屬性定義是否應該輪流反向播放動畫。
如果 animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向後播放。
注釋：如果把動畫設定為只播放一次，則該屬性沒有效果。
| 默認值： | normal |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.animationDirection="alternate" |
語法
animation-direction: normal|alternate;
