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

HTMLDOMスタイルanimationDurationプロパティ

AnimationDurationプロパティは、アニメーションがサイクルを完了するのにかかる時間の長さを指定するために使用されます。

構文

以下は、-

の構文です。

AnimationDurationプロパティの設定-

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

値

以下は値です-

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

例

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

<!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="The animation duration has been increased from 5s to 10s";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to create the above animation duration</p>
<button onclick="changeDuration()">CHANGE DURATION</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルanimationDurationプロパティ

しばらくするとアニメーションの色が変わります-

HTMLDOMスタイルanimationDurationプロパティ

[期間の変更]ボタンをクリックすると、アニメーションの期間が10秒に延長されます-

HTMLDOMスタイルanimationDurationプロパティ


  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 無限 これにより、アニメーションが