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

animation-directionプロパティ

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

構文(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