HTML DOM スタイル animationPlayState プロパティの使い方を解説
animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。
構文
animationPlayState プロパティを設定する場合の構文は以下の通りです。
object.style.animationPlayState = "running|paused|initial|inherit";
設定できる値
animationPlayState プロパティには、次の値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | running アニメーションが現在実行中であることを示します。これがデフォルト値です。 |
| 2 | paused アニメーションを一時停止状態にします。再度 running に変更すると、停止した位置から再開されます。 |
| 3 | initial このプロパティを初期値に設定します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
使用例
ここでは、animationPlayState プロパティを使ってアニメーションの一時停止を切り替える具体的な例を見てみましょう。ボタンをクリックすると、上下に移動するボックスのアニメーションが一時停止します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 70px;
height: 30px;
border: 3px solid brown;
box-shadow: 0 20px 0 -3px orchid;
z-index:-1;
position: relative;
animation: move 5s infinite;
animation-play-state: play;
}
@keyframes move {
from {top: 0px; }
to {top: 400px;}
}
</style>
<script>
function stateToggle(){
document.getElementById("DIV1").style.animationPlayState="paused";
document.getElementById("Sample").innerHTML="アニメーションが一時停止されました";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>下のボタンをクリックすると、上のアニメーションの状態が切り替わります</p>
<button onclick="stateToggle()">CHANGE STATE</button>
<p id="Sample"></p>
</body>
</html>
出力結果
このコードを実行すると、ボックスが上から下へ移動するアニメーションが表示されます。
「CHANGE STATE」ボタンをクリックすると、アニメーションが一時停止し、メッセージが表示されます。
-
HTML DOM スタイルの animationTimingFunction プロパティとは？使い方と値を徹底解説
animationTimingFunction プロパティは、アニメーションが1サイクルの中でどのように進行するかを指定するために使用されます。具体的には、アニメーションの速度カーブ（イージング）を設定または取得します。速度カーブとは、アニメーションがある状態から別の状態へ移行するまでの時間の進み方を定義するもので、これによってトランジションの滑らかさが決まります。 構文（Syntax） animationTimingFunction プロパティを設定する場合の構文は以下のとおりです。 object.style.animationTimingFunction = linear|ease|eas
-
HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init