Style animationDirection属性
- 前のページ animationDelay
- 次のページ animationDuration
- 上一层に戻る HTML DOM Styleオブジェクト
定義と使用方法
animationDirection 属性設定または返り値がアニメーションが交互にループする場合に逆方向に再生されるかどうかを定義します。
注釈：アニメーションが一度だけ再生される設定になっている場合、この属性は無効です。
例
<div>要素のanimationDirection属性を変更：
document.getElementById("myDIV").style.animationDirection = "reverse";
文法
animationDirection属性の返り値：
object.style.animationDirection
animationDirection属性の設定：
object.style.animationDirection = "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。 |
技術的詳細
| デフォルト値： | normal |
|---|---|
| 返り値： | 文字列で、要素の animation-direction 属性。 |
| CSSバージョン： | CSS3 |
ブラウザのサポート
animationDirection CSS3（1999）の機能です。
すべてのブラウザが完全にサポートしています：
| クローム | エッジ | ファイアフォックス | サファリ | オペラ | IE |
|---|---|---|---|---|---|
| クローム | エッジ | ファイアフォックス | サファリ | オペラ | IE |
| サポート | サポート | サポート | サポート | サポート | 11 |
関連ページ
CSS リファレンスマニュアル：animation-direction 属性
- 前のページ animationDelay
- 次のページ animationDuration
- 上一层に戻る HTML DOM Styleオブジェクト
