HTMLDOMスタイルanimationTimingFunctionプロパティ

AnimationTimingFunctionは、アニメーションがそのサイクル中に進行する方法を指定するために使用されます。これは、アニメーションの速度曲線を設定または返すことによって行われます。速度曲線は、アニメーションが1つの状態から別の状態に移動するのにかかる時間を指定することにより、遷移がどの程度スムーズになるかを定義します。

構文

以下は、-

の構文です。

AnimationTimingFunctionプロパティの設定-

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

値

以下は値です-

Sr.No	値と説明
1	線形これは、アニメーションの過程全体でアニメーションの速度が同じであることを指定します。
2	使いやすさこれは、アニメーションの開始と終了が遅いが、途中で速くなることを指定するデフォルト値です。
3	イーズインアニメーションの開始が遅い。
4	イーズアウトアニメーションの終わりは遅いです。
5	イーズインアウトアニメーションは最初は遅く、最後も遅くなります。
6	cube-bezier（n、n、n、n）カスタム値の3次ベジェ関数を定義するFo。
7	初期このプロパティを初期値に設定します。
8	継承親プロパティ値を継承します。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   #PARA1{
      border: 2px solid black;
      position: relative;
      animation: demo 5s infinite;
      animation-timing-function: linear;
   }
   @keyframes demo {
      from {background-color: lightcoral; color:black;}
      to {background-color: indigo; color:white;}
   }
</style>
<script>
   function timingChange(){
      document.getElementById("PARA1").style.animationTimingFunction="ease";
      document.getElementById("Sample").innerHTML="The animation timing is now set to ease.";
   }
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルanimationTimingFunctionプロパティ

[タイミングの変更]ボタンをクリックすると-

HTMLDOMスタイルanimationTimingFunctionプロパティ

HTMLDOMスタイルのbackfaceVisibilityプロパティ

HTMLDOMスタイルanimationPlayStateプロパティ

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