CSS3 animation-directionプロパティ
CSS リファレンス例
まずアニメーションを1回実行し、次に逆方向に1回実行します：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari と Chrome */
-webkit-animation-direction:alternate; /* Safari と Chrome */
試してみる »
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit-、-ms-、-moz- の前に付いている数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| 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 プロパティは、アニメーションをループさせて交互に逆再生するかどうかを定義します。
注意：アニメーションが1回だけ再生されるように設定されている場合、このプロパティは効果がありません。
| デフォルト値： | normal |
|---|---|
| 継承： | 否 |
| アニメーション可能： | いいえ。参照：アニメーション可能（animatable）。 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.animationDirection="reverse" 試してみる |
CSS 構文
animation-direction: 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。 |
関連記事
CSS3 チュートリアル：CSS3 アニメーション（Animations）
その他の拡張