CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 アニメーション-duration 属性 CSS3 アニメーション-delay 属性

CSS3 アニメーション-direction属性の使用方法および例

CSSアニメーション-direction属性は、アニメーションが交互のループで逆方向に再生されるかどうかを指定します。

以下の表は、この属性の使用状況とバージョン履歴をまとめています。

デフォルト値：	normal
適用範囲：	すべての要素::beforeおよび::after 偽要素
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.animationDirection="reverse"

アニメーション-directionの使用方法

この属性の構文は以下の通りです：

アニメーション-direction: 通常 | 逆序 | 交互 | 交互-reverse　|　initial　|　inherit

以下の例では、animation-direction属性。

例

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-アニメーション-name:　moveit;
　　　　-webkit-アニメーション-duration:　4s;
　　　　-webkit-アニメーション-iteration-count:　2;
　　　　-webkit-アニメーション-direction:　alternate;
　　　　
　　　　アニメーション-name:　moveit;
　　　　アニメーション-duration:　4s;
　　　　アニメーション-iteration-count:　2;
　　　　アニメーション-direction:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストをしてみて‹/›

注意：アニメーションを一度だけ再生するように設定すると、animation-directionこの属性は無効です、以下を参照してくださいアニメーション-iteration-count属性。

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
normal	アニメーションは各サイクルで再生するべきです。これはデフォルトの値です。
reverse	アニメーションは各ループで後方に再生するべきです。
alternate	アニメーションは最初のループで前方に再生し、その後後方に再生し、それから交互に再生し続けます。
alternate-reverse	アニメーションは最初のループで後方に再生し、その後前方に再生し、それから交互に再生し続けます。
initial	このプロパティをデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のアニメーションプロパティの計算値を使用します。-direction。

ブラウザの互換性

アニメーション-direction属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	ファイアフォックス 5+ ^-moz-、15 + グーグルクローム 4+ ^-webkit- インターネットエクスプローラー 10+ アップルサファリ 4+ ^-webkit- オペラ 12+ ^-o-、15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

CSS3 アニメーション-duration 属性 CSS3 アニメーション-delay 属性