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

HTMLDOMスタイルanimationFillModeプロパティ

AnimationFillModeプロパティは、実行時間外、つまり実行終了後、または遅延が指定されている場合にスタイルを適用する方法を指定するために使用されます。これは、アニメーションの開始前と終了後にcssアニメーションスタイルを要素に設定するのに役立ちます。

構文

以下は、-

の構文です。

AnimationFillModeプロパティの設定-

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

値

以下は値です-

値 説明
なし これにより、アニメーションは、開始前またはアニメーションの終了後にターゲット要素にスタイルを適用しなくなります。これがデフォルト値です。
転送 アニメーションが終了した後、最後のキーフレームスタイルをターゲット要素に適用します。
後方 アニメーションが終了した後、最初のキーフレームスタイルをターゲット要素に適用します。
両方 アニメーションに順方向と逆方向の両方のルールを適用します
初期 このプロパティを初期値に設定する場合
継承 このプロパティを親要素から継承します。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      height: 30px;
      width: 30px;
      background-color: orange;
      animation: small 4s;
      animation-fill-mode: forwards;
   }
   @keyframes small {
      0% {
         width: 200px;
         height: 200px;
         background-color: white;
      }
      33% {
         background-color: green;
      }
      66% {
         background-color: violet;
      }
      100% {
         background-color: darkred;
      }
   }
</style>
<script>
   function changeFillMode(){
      document.getElementById("DIV1").style.animationFillMode="backwards";
      document.getElementById("Sample").innerHTML="The animation fillmode is now backwards";
   }
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to change the above animation fillmode property</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルanimationFillModeプロパティ

アニメーションが終了すると、最後のキーフレームである正方形の色が濃い赤になります-

HTMLDOMスタイルanimationFillModeプロパティ

CHANGE FILLをクリックすると、最初のキーフレームであるオレンジに色が変わります-

HTMLDOMスタイルanimationFillModeプロパティ

注 −このプロパティはIE/EDGEおよびSafariブラウザではサポートされていません。


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