animation-play-stateプロパティの説明
CSSの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を使って、アニメーションの再生と一時停止を制御した場合、以下のような挙動となります。
<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>
.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;
}