HTML DOMのanimationFillModeプロパティとは？使い方と設定値を解説
animationFillModeプロパティは、CSSアニメーションの実行時間外、つまりアニメーション終了後や遅延（animation-delay）が指定されている期間に、スタイルをどのように適用するかを指定するためのプロパティです。このプロパティを活用することで、アニメーション開始前や終了後の要素の見た目を細かく制御できます。
構文
animationFillModeプロパティを設定するための構文は以下のとおりです。
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
指定できる値
animationFillModeプロパティに指定できる値は以下のとおりです。
| 値 | 説明 |
|---|---|
| none | アニメーションの開始前および終了後に、ターゲット要素へスタイルを適用しません。デフォルト値です。 |
| forwards | アニメーション終了後も、最後のキーフレームのスタイルをターゲット要素に適用し続けます。 |
| backwards | アニメーション開始前の遅延期間中、最初のキーフレームのスタイルをターゲット要素に適用します。 |
| both | forwardsとbackwardsの両方のルールをアニメーションに適用します。 |
| 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="アニメーションのfillmodeがbackwardsに変更されました";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>下のボタンをクリックすると、上のアニメーションのfillmodeプロパティが変更されます</p>
<button onclick="changeFillMode()">FILLを変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、以下のような結果が表示されます。
アニメーションが終了すると、正方形の色は最後のキーフレームで指定された暗い赤（darkred）のまま維持されます。
「FILLを変更」ボタンをクリックするとfillmodeがbackwardsに切り替わり、アニメーション終了後の色がオレンジ（要素本来の背景色）に戻ります。
注意：このプロパティは、IE/EdgeおよびSafariブラウザではサポートされていません。
-
HTML DOM スタイル animationPlayState プロパティの使い方を解説
animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ
-
HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init