HTML DOM Style animationDurationプロパティの使い方を徹底解説
animationDurationプロパティは、CSSアニメーションが1サイクルを完了するまでにかかる時間（再生時間）を指定するために使用されるHTML DOMスタイルオブジェクトのプロパティです。JavaScriptからこのプロパティを操作することで、実行中のアニメーションの速度を動的に変更することができます。CSSのanimation-durationプロパティに対応しています。
構文
animationDurationプロパティを設定する場合の基本構文は以下のとおりです。
object.style.animationDuration = "time|initial|inherit"
設定できる値
animationDurationプロパティには、以下の3つの値を指定できます。
| 値 | 説明 |
|---|---|
| time | アニメーション1サイクルの長さを秒（s）またはミリ秒（ms）で指定します。初期値は「0」です。 |
| initial | このプロパティを既定の初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
サンプルコード
以下は、animationDurationプロパティを使った具体的な例です。円形の要素がオレンジ色から紫色へ変化しながら移動するアニメーションに対し、ボタンをクリックすると再生時間が5秒から10秒に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 25px;
height: 25px;
border-radius: 50%;
border: 8px solid orange;
position: relative;
animation: ring infinite;
animation-duration: 5s;
}
@keyframes ring {
from {top: 0px; left:0px}
to {border-color: purple; left: 500px;}
}
</style>
<script>
function changeDuration(){
document.getElementById("DIV1").style.animationDuration="10s";
document.getElementById("Sample").innerHTML="アニメーションの再生時間を5秒から10秒に変更しました";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>下のボタンをクリックすると、アニメーションの再生時間が変更されます</p>
<button onclick="changeDuration()">CHANGE DURATION</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
しばらく経過すると、アニメーションの枠線の色が変化します。
「CHANGE DURATION」ボタンをクリックすると、アニメーションの再生時間が10秒に延長され、動きがゆっくりになります。
-
HTML DOM スタイル animationPlayState プロパティの使い方を解説
animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ
-
HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init