HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのanimationDelayプロパティとは？アニメーションの開始時間を制御する方法

HTML DOMのanimationDelayプロパティは、CSSアニメーションが開始されるタイミングを指定するために使用されます。アニメーションを即座に開始させることも、一定時間待ってから開始させることも、あるいは途中から開始させることも可能です。

構文（Syntax）

animationDelayプロパティを設定する際の基本構文は以下のとおりです。

object.style.animationDelay = "time|initial|inherit"

設定できる値

animationDelayプロパティには、以下の3つの値を指定できます。

値説明
timeアニメーションが開始されるまでの待ち時間を、秒（s）またはミリ秒（ms）で指定します。デフォルト値は0で、アニメーションは即座に開始されます。負の値を指定すると、アニメーションが途中の状態から始まります。
initialこのプロパティを初期値（デフォルト値）に戻します。
inherit親要素からプロパティの値を継承します。

サンプルコード

ここでは、animationDelayプロパティを使った具体的な例を見ていきましょう。ボタンをクリックすると、アニメーションの遅延時間が1秒から5秒に変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    #box {
        width: 50px;
        height: 50px;
        border-radius: 10%;
        background: lightgreen;
        position: relative;
        animation: glide 5s;
        animation-delay: 1s;
        transition: 0.5s;
    }
    @keyframes glide {
        from {left: 0px;}
        to {left: 200px; background-color: lightblue;}
    }
</style>
<script>
    function delayChange(){
        document.getElementById("box").style.animationDelay="5s";
        document.getElementById("Sample").innerHTML="アニメーションは5秒後に開始されます";
    }
</script>
</head>
<body>
<h1>animationDelayプロパティのサンプル</h1>
<div id="box"></div>
<p>下のボタンをクリックすると、アニメーションの遅延時間が5秒に変更されます</p>
<button onclick="delayChange()">CHANGE DELAY</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、まず緑色の正方形が表示され、1秒の遅延の後にアニメーションが開始されます。

アニメーション開始から1秒後、ボックスは左から右へ移動し、背景色も薄緑色から水色へと変化していきます。移動の途中では以下のような状態になります。

HTML DOMのanimationDelayプロパティとは？アニメーションの開始時間を制御する方法

次に、「CHANGE DELAY」ボタンをクリックすると、JavaScriptによってanimationDelayプロパティが「5s」に書き換えられます。その結果、アニメーションは5秒の遅延を経てから開始されるようになります。

HTML DOMのanimationDelayプロパティとは？アニメーションの開始時間を制御する方法

このように、animationDelayプロパティを活用することで、JavaScriptから動的にアニメーションの開始タイミングを制御できます。複数の要素に異なる遅延時間を設定すれば、順番にアニメーションを実行する演出なども簡単に実現できるので、ぜひ活用してみてください。

  1. HTML DOM スタイル animationPlayState プロパティの使い方を解説

    animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ

  2. HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説

    animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init