animation-direction プロパティ

　animation-direction プロパティは、CSS アニメーションの再生/逆再生を指定するプロパティです。
　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;
	}
}

構文(Syntax)

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

値の取得

object.style.animationDirection

値の設定

object.style.animationDirection="[ normal | reverse | alternate | alternate-reverse | initial | inherit ]"

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

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

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