animation-play-state：アニメーションを再生させるか一時停止させるか指定する

animation-play-stateプロパティの説明

animation-play-stateは、CSSで作成したアニメーションの再生と停止の状態を指定します。この値には再生中か停止中かを示すキーワードを記述します。この値を変えることで、アニメーションの途中で一時停止するなどのフラグ管理が行えます。

アニメーション関連のプロパティを一括で制御する場合は、animationを使用して下さい。

animation-play-stateに指定できる値

running

アニメーションが再生中であることを示します。これが初期値です。

paused

アニメーションが停止中であることを示します。

animation-play-stateの使い方とサンプル

animation-play-stateプロパティの構文は以下の通りです。

/* キーワード値 */
animation-play-state: running;
animation-play-state: paused;

/* 複数の値を指定 */
animation-play-state: paused, running, paused;

/* グローバル値 */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: unset;

animation-play-stateの実例

それでは簡単な例を見てみましょう。JavaScriptを使って、アニメーションの再生と一時停止を制御した場合、以下のような挙動となります。

.samp_box > div {
	margin-top: 10px;
	width: 7em;
	background: #ccc;
	text-align: center;
	animation-name: as_move;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes as_move {
	from { margin-left: 0%; }
	to { margin-left: 80%; }
}
.running {
	animation-play-state: running;
}
.paused {
	animation-play-state: paused;
}

<div class="samp_box">
	<div id="item" class="running">Item</div>
</div>

<button type="button" onclick="buttonPlay()">再生</button>
<button type="button" onclick="buttonPause()">停止</button>

<script>
function buttonPlay() {
	var target = document.getElementById("item");
	target.className = "running";
	target.innerHTML = "Run!";
}
function buttonPause() {
	var target = document.getElementById("item");
	target.className = "paused";
	target.innerHTML = "Pause!";
}
</script>