HTMLDOMスタイルanimationPlayStateプロパティ
AnimationPlayStateプロパティは、アニメーションの状態を実行中か一時停止中かを設定または取得するために使用されます。これは、アニメーションを切り替えるのに役立ちます。
構文
以下は
の構文ですAnimationPlayStateプロパティの設定-
object.style.animationPlayState = "running|paused|initial|inherit"
値
以下は値です-
| Sr.No | 値と説明 |
|---|---|
| 1 | 実行中 アニメーションが現在実行中であり、デフォルト値であることを指定します。 |
| 2 | 一時停止 アニメーションを指定するために一時停止します。 |
| 3 | 初期 このプロパティを初期値に設定します。 |
| 4 | 継承 親プロパティ値を継承します。 |
例
AnimationPlayStateプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 70px;
height: 30px;
border: 3px solid brown;
box-shadow: 0 20px 0 -3px orchid;
z-index:-1;
position: relative;
animation: move 5s infinite;
animation-play-state: play;
}
@keyframes move {
from {top: 0px; }
to {top: 400px;}
}
</style>
<script>
function stateToggle(){
document.getElementById("DIV1").style.animationPlayState="paused";
document.getElementById("Sample").innerHTML="The animation is now paused";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to toggle the above animation state</p>
<button onclick="stateToggle()">CHANGE STATE</button>
<p id="Sample"></p>
</body>
</html> 出力
これにより、ボックスが上から下に移動するときに次の出力が生成されます-
状態の変更をクリックすると-
-
HTMLDOMスタイルanimationTimingFunctionプロパティ
AnimationTimingFunctionは、アニメーションがそのサイクル中に進行する方法を指定するために使用されます。これは、アニメーションの速度曲線を設定または返すことによって行われます。速度曲線は、アニメーションが1つの状態から別の状態に移動するのにかかる時間を指定することにより、遷移がどの程度スムーズになるかを定義します。 構文 以下は、-の構文です。 AnimationTimingFunctionプロパティの設定- object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-b
-
HTMLDOMスタイルanimationIterationCountプロパティ
AnimationIterationCountプロパティは、アニメーションの再生回数を設定または取得するために使用されます。 構文 以下は、-の構文です。 AnimationIterationCountプロパティの設定- object.style.animationIterationCount = "number|infinite|initial|inherit" 値 以下は値です- Sr.No 値と説明 1 数値 アニメーションを再生する回数を示す数値。デフォルトでは1に設定されています。 2 無限 これにより、アニメーションが