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

HTMLDOMスタイルanimationDelayプロパティ

AnimationDelayプロパティは、アニメーションシーケンスの開始時刻を指定するために使用されます。時間間隔の後、または途中ですぐに開始するように設定できます。

構文

以下は、-

の構文です。

AnimationDelayプロパティの設定-

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

値

以下の値を使用できます-

値 説明
時間 アニメーションが開始するまで待機する時間を秒単位またはミリ秒単位で指定します。時間のデフォルト値は0です。
初期 このプロパティを初期値に設定します。
継承 親プロパティ値を継承します。

例

AnimationDelayプロパティの例を見てみましょう-

<!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="The animation will now start after a delay of 5 seconds";
   }
</script>
</head>
<body>
<h1>animationDelay property example</h1>
<div id="box"></div>
<p>Change the above animation delay to 5s by clicking the below button</p>
<button onclick="delayChange()">CHANGE DELAY</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルanimationDelayプロパティ

1秒後、アニメーションが開始され、遷移の途中で次の出力が得られます-

HTMLDOMスタイルanimationDelayプロパティ

[遅延の変更]ボタンをクリックすると、5秒後にアニメーションが開始されます-

HTMLDOMスタイルanimationDelayプロパティ


  1. HTMLDOMスタイルanimationPlayStateプロパティ

    AnimationPlayStateプロパティは、アニメーションの状態を実行中か一時停止中かを設定または取得するために使用されます。これは、アニメーションを切り替えるのに役立ちます。 構文 以下はの構文です AnimationPlayStateプロパティの設定- object.style.animationPlayState = "running|paused|initial|inherit" 値 以下は値です- Sr.No 値と説明 1 実行中 アニメーションが現在実行中であり、デフォルト値であることを指定します。 2 一時停止

  2. HTMLDOMスタイルanimationIterationCountプロパティ

    AnimationIterationCountプロパティは、アニメーションの再生回数を設定または取得するために使用されます。 構文 以下は、-の構文です。 AnimationIterationCountプロパティの設定- object.style.animationIterationCount = "number|infinite|initial|inherit" 値 以下は値です- Sr.No 値と説明 1 数値 アニメーションを再生する回数を示す数値。デフォルトでは1に設定されています。 2 無限 これにより、アニメーションが