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

animation-direction プロパティ

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

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

@keyframes mymove {
	from {

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

ページ内 Index

構文(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アニメーションを逆再生します。