備忘録的プログラミングリファレンス

animation-directionプロパティ

　animation-directionプロパティは、CSS animationの再生/逆再生を指定するプロパティです。
　alternateやalternate-reverse値の場合はanimation-iteration-countプロパティで再生回数を２回にした方がよいでしょう。

divエレメントにマウスポインターが乗ったときにmymoveというCSSアニメーションを逆再生（EXAMPLEを参照）
div:hover{
	animation: mymove 2s 2;
	animation-direction:alternate-reverse;
}

@keyframes mymove {
	from {

	}
	to {
		box-shadow: 10px 10px;
	}
}

関連プロパティ

　以下は関連するプロパティです。

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間。
animation-durationCSSアニメーションの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesセレクターで定義したCSS animation名。
animation-play-state実行/停止かの設定。
animation-timing-functionCSS animationの実行速度曲線。

構文(Syntax)

CSS

animation-direction:[ normal | reverse | alternate | alternate-reverse | initial | inherit ];

DOM(JavaScript)

値の取得
object.style.animationDirection
値の設定
object.style.animationDirection="[ normal | reverse | alternate | alternate-reverse | initial | inherit ]"

値（Values）

Value摘要
normal初期値（default値）。順方向に再生。
reverse逆再生
alternate順方向に再生した後に逆再生
alternate-reverse逆方向に再生した後に順再生
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考（Remarks）

初期値（Default value）normal
継承（Inherited）no
変化（Animatable）no

Example

　animation-directionの例です。divエレメントにマウスポインターが乗ったときにmymoveというCSSアニメーションを逆再生します。