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

HTMLDOMスタイルanimationIterationCountプロパティ

AnimationIterationCountプロパティは、アニメーションの再生回数を設定または取得するために使用されます。

構文

以下は、-

の構文です。

AnimationIterationCountプロパティの設定-

object.style.animationIterationCount = "number|infinite|initial|inherit"

値

以下は値です-

Sr.No 値と説明
1 数値
アニメーションを再生する回数を示す数値。デフォルトでは1に設定されています。
2 無限
これにより、アニメーションが無限に再生されます。
3 初期
このプロパティを初期値に設定します。
4 継承
親プロパティ値を継承します。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   p {
      color: black;
      animation: shrink 3s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
   }
   @keyframes shrink {
      0% {
         color: white;
         letter-spacing: 1.8em;
      }
      100% {
         color: magenta;
         letter-spacing: 0.01em;
      }
   }
</style>
<script>
   function IncreaseIteration(){
      document.getElementById("PARA1").style.animationIterationCount=5;
      document.getElementById("Sample").innerHTML="The animation Iteration count is now 5";
   }
</script>
</head>
<body>
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Click the below button to change how many times the above animation will run</p>
<button onclick="IncreaseIteration()">INCREASE COUNT</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルanimationIterationCountプロパティ

[座標]ボタンをクリックし、[現在地を知る]ポップアップで[許可]をクリックすると-

HTMLDOMスタイルanimationIterationCountプロパティ


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