アニメーションを実行方向を指定したり、停止したりする

アニメーションを逆再生

アニメーションを繰り返すよう設定した場合に、折り返して逆向きで実行する(逆再生)するかを指定できるのがanimation-directionプロパティです。

animation-directionプロパティ
設定値	説明
normal	初期値。通常のアニメーションを繰り返す
reverse	通常とは逆向きにアニメーションを実行する
alternate	奇数回目は通常通りの実行、偶数回目は逆向きに実行しながらアニメーションを繰り返す。逆向き実行時はanimation-timing-functionプロパティで指定した動作も逆になります。「ease-in」を設定しているときは「ease-out」でアニメーションが実行されます。
alternate-reverse	偶数回目は通常通りの実行、奇数回目は逆向きに実行しながらアニメーションを繰り返す。逆向き実行時はanimation-timing-functionプロパティで指定した動作も逆になります。「ease-in」を設定しているときは「ease-out」でアニメーションが実行されます。

アニメーションの実行・一時停止を指定する

animation-play-stateプロパティを利用すると、アニメーションの実行・一時停止を指定できます。複数のアニメーションを実行・一時停止を変えて適用するときは、それぞれに対応する値をカンマ「,」で区切って書きます。

animation-play-stateプロパティ
設定値	説明
running	一時停止中のアニメーションを再開します。アニメーションは一時停止された時点から実行されます。
paused	実行中のアニメー損を一時停止します。アニメーションは、そのときの状態を表示し続ける。

アニメーションの待機中や完了後のスタイルを指定

animation-fill-modeプロパティを利用すると、、アニメーションの待機中と完了後のスタイルを指定することができます。

待機中とは：
　animation-delayプロパティで指定するアニメーションの待機時間
完了後とは：
　animation-durationプロパティで指定するアニメーションの
　実行時間が経過した後のこと。

それぞれ、最初・最後のキーフレームに書かれているスタイルが適用されますが、animation-directionプロパティ、animation-iteraiton-countプロパティでの値により、「最初」、「最後」が異なるので注意が必要です。複数のアニメーションを待機中・完了後のスタイルを変えて適用するときhb、、それぞれに対応するスタイルをカンマ「,」で区切って書きます。

animation-fill-modeプロパティ
設定値	説明
none	初期値。アニメーションの待機中と完了後のスタイルは適用されません。
forwards	アニメーションの完了後に、最後のキーフレームで設定されているスタイルを保持する。
backwards	アニメーションの待機中に、最初のキーフレームで設定されているスタイルを適用する。
both	「forwards」、「backwards」を合わせたものです。

animation-direction,animation-play-state,animation-fill-modeを利用したサンプルコードの実行結果はこちらです。

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>アニメーションを実行する方向を指定したり、一時停止にしたり、待機中や完了後のスタイルを指定する。</title>
	<style>
	*{margin:0;padding:0;}
	.container{
		width:960px;
		height:480px;
	}
	div{
		width:40px;
		height:40px;
		overflow:hidden;
		position:absolute;
	}

	.bgYellow{background-color:yellow;}
	.bgSilver{background-color:silver;}
	.bgOrange{background-color:orange;}

	.aniDur5s{
		-webkit-animation-duration:5s;
		animation-duration:5s;
	}
	.aniDur7s{
		-webkit-animation-duration:7s;
		animation-duration:7s;
	}

	@-webkit-keyframes boxMove1{
		0%{left:300px;top:100px;}
	   20%{left:140px;top:210px;}
	   40%{left: 80px;top:340px;}
	   60%{left:180px;top:180px;}
	   80%{left:440px;top:240px;}
	   90%{left:170px;top: 80px;}
	  100%{left:300px;top:100px;}
	}
	@keyframes boxMove1{
		0%{left:300px;top:100px;background-color:red;}
	   20%{left:140px;top:210px;}
	   40%{left: 80px;top:340px;}
	   60%{left:180px;top:180px;}
	   80%{left:440px;top:240px;}
	   90%{left:170px;top: 80px;}
	  100%{left:300px;top:100px;}
	}
	.anime1{
		-webkit-animation-name:boxMove1;
				animation-name:boxMove1;
	}
	.anime1:hover{
		-webkit-animation-play-state:paused;
				animation-play-state:paused;
	}

	@-webkit-keyframes boxMove2{
		0%{left:100px;top:100px;}
	   20%{left:110px;top:110px;}
	   40%{left:140px;top:140px;}
	   60%{left:180px;top:180px;}
	   80%{left:240px;top:240px;}
	   90%{left:300px;top:300px;}
	  100%{left:100px;top:100px;}
	}
	@keyframes boxMove2{
		0%{left:100px;top:100px;}
	   20%{left:110px;top:110px;}
	   40%{left:140px;top:140px;}
	   60%{left:180px;top:180px;}
	   80%{left:240px;top:240px;}
	   90%{left:300px;top:300px;}
	  100%{left:100px;top:100px;}
	}
	.anime2{
		-webkit-animation-name:boxMove2;
				animation-name:boxMove2;
	}
	.anime2:hover{
		-webkit-animation-play-state:paused;
				animation-play-state:paused;
	}
	.aniDirAlt{
		-webkit-animation-direction:alternate;
				animation-direction:alternate;
	}
	.aniFillModeFor{
		-webkit-animation-fill-mode:forwards;
				animation-fill-mode:forwards;
	}
	.aniFillModeBack{
		-webkit-animation-fill-mode:backwards;
				animation-fill-mode:backwards;
	}
	.aniCntInf{
		-webkit-animation-iteration-count:infinite;
				animation-iteration-count:infinite;
	}
	.aniDelay3000ms{
		-webkit-animation-delay:3000ms;
		animation-delay:3000ms;
	}

	
	p{font-size:16px;font-family:"メイリオ","serif";}
	</style>

</head>
<body>
	<p>アニメーションを色々試す</p>
	<div class="container">
		<div class="bgSilver anime1 aniDur5s aniCntInf aniDelay3000ms aniFillModeBack"></div>
		<div class="bgOrange anime2 aniDur7s aniCntInf aniDirAlt"></div>
	</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<!DOCTYPE html>

<head>

<title>アニメーションを実行する方向を指定したり、一時停止にしたり、待機中や完了後のスタイルを指定する。</title>

<style>

*{margin:0;padding:0;}

.container{

width:960px;

height:480px;

}

div{

width:40px;

height:40px;

overflow:hidden;

position:absolute;

}

.bgYellow{background-color:yellow;}

.bgSilver{background-color:silver;}

.bgOrange{background-color:orange;}

.aniDur5s{

-webkit-animation-duration:5s;

animation-duration:5s;

}

.aniDur7s{

-webkit-animation-duration:7s;

animation-duration:7s;

}

@-webkit-keyframes boxMove1{

0%{left:300px;top:100px;}

20%{left:140px;top:210px;}

40%{left: 80px;top:340px;}

60%{left:180px;top:180px;}

80%{left:440px;top:240px;}

90%{left:170px;top: 80px;}

100%{left:300px;top:100px;}

}

@keyframes boxMove1{

0%{left:300px;top:100px;background-color:red;}

20%{left:140px;top:210px;}

40%{left: 80px;top:340px;}

60%{left:180px;top:180px;}

80%{left:440px;top:240px;}

90%{left:170px;top: 80px;}

100%{left:300px;top:100px;}

}

.anime1{

-webkit-animation-name:boxMove1;

animation-name:boxMove1;

}

.anime1:hover{

-webkit-animation-play-state:paused;

animation-play-state:paused;

}

@-webkit-keyframes boxMove2{

0%{left:100px;top:100px;}

20%{left:110px;top:110px;}

40%{left:140px;top:140px;}

60%{left:180px;top:180px;}

80%{left:240px;top:240px;}

90%{left:300px;top:300px;}

100%{left:100px;top:100px;}

}

@keyframes boxMove2{

0%{left:100px;top:100px;}

20%{left:110px;top:110px;}

40%{left:140px;top:140px;}

60%{left:180px;top:180px;}

80%{left:240px;top:240px;}

90%{left:300px;top:300px;}

100%{left:100px;top:100px;}

}

.anime2{

-webkit-animation-name:boxMove2;

animation-name:boxMove2;

}

.anime2:hover{

-webkit-animation-play-state:paused;

animation-play-state:paused;

}

.aniDirAlt{

-webkit-animation-direction:alternate;

animation-direction:alternate;

}

.aniFillModeFor{

-webkit-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

.aniFillModeBack{

-webkit-animation-fill-mode:backwards;

animation-fill-mode:backwards;

}

.aniCntInf{

-webkit-animation-iteration-count:infinite;

animation-iteration-count:infinite;

}

.aniDelay3000ms{

-webkit-animation-delay:3000ms;

animation-delay:3000ms;

}

p{font-size:16px;font-family:"メイリオ","serif";}

</style>

</head>

<body>

<p>アニメーションを色々試す</p>

</div>

</body>

</html>

animationプロパティで一括指定

アニメーションのプロパティを一括指定するには、animationプロパティを使います。
それそれの値を任意の順番で、半角スペースで区切りしています。

ただし、animation-durationプロパティとanimation-delayプロパティの値については、先に指定されている値がanimation-duraitonの値、後に指定されている値がanimation-delayの値とみなされます。値を省略すると初期値が適用されます。
複数のアニメーションを適用する場合は、それぞれに対応する値のセットをカンマ「,」で区切って書きます。

animation: 値１値２値３値４値５値６値７

値１：animation-nameの値
値２：animation-durationの値
値３：animation-timing-functionの値
値４：animation-delayの値
値５：animation-iteration-countの値
値６：animation-directionの値
値７：animation-fill-modeの値