CSS プロパティ animation-fill-mode

CSS animation-fill-mode 属性详解: アニメーション再生前後の状態を制御する

CSS animation-fill-mode 属性详解: アニメーション再生前後の状態を制御する

このページでは、CSSの`animation-fill-mode`プロパティについて詳しく解説します。アニメーションの再生前、再生後、あるいはその両方のタイミングでスタイルをどのように保持するかを制御する方法を学び、より洗練されたアニメーション効果を実現しましょう。

目次

1. animation-fill-modeとは？

`animation-fill-mode`プロパティは、CSSアニメーションが再生される前と後の要素のスタイルを制御するために使用します。具体的には、アニメーションの最初のフレームまたは最後のフレームのスタイルを保持するか、アニメーションが開始される前のスタイルに戻すかを指定できます。

animation-delayとの違い

`animation-delay`はアニメーションの開始時間を制御するのに対し、`animation-fill-mode`はアニメーションの開始前および終了後に要素に適用されるスタイルを制御します。

2. animation-fill-mode の値

`animation-fill-mode`プロパティには、以下の4つの値を設定できます。

値 説明
none アニメーションの開始前と終了後は、要素は通常のスタイルに戻ります。(既定値)
forwards アニメーションの終了後、要素はアニメーションの最後のフレームのスタイルを保持します。
backwards アニメーションの遅延時間中、要素はアニメーションの最初のフレームのスタイルを適用します。
both forwardsとbackwardsの両方の動作を組み合わせます。

各値のコード例

以下は、各値の効果を示す簡単な例です。

none (既定値)

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s linear infinite;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

この例では、アニメーションが終了するたびに、ボックスは元の赤い背景色に戻ります。

forwards

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s linear forwards;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

この例では、アニメーションが終了した後、ボックスはアニメーションの最後のフレームのスタイル、つまり黄色の背景色を保持します。

backwards

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s linear 1s backwards;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

この例では、アニメーションの1秒間の遅延時間中、ボックスはアニメーションの最初のフレームのスタイル、つまり黄色の背景色を適用します。

both

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s linear 1s both;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

この例では、アニメーションの1秒間の遅延時間中、ボックスはアニメーションの最初のフレームのスタイル（黄色の背景色）を適用し、アニメーションが終了した後もそのスタイルを保持します。

3. animation-fill-mode の活用シーン

`animation-fill-mode`プロパティは、様々な場面で活用できます。代表的な例をいくつかご紹介します。

持続的な視覚効果の作成

`animation-fill-mode: forwards`を使用すると、ボタンの「押された」状態など、アニメーションの最終状態を維持することができます。

よりスムーズなアニメーション遷移の実現

`animation-fill-mode: both`を使用することで、アニメーションの開始時や終了時の唐突な変化を防ぎ、より自然で滑らかなアニメーションを実現することができます。

JavaScriptと連携したインタラクティブな効果の実装

JavaScriptを使用して`animation-fill-mode`プロパティを動的に変更することで、ユーザーの操作に応じてアニメーションの終了状態を変更するなど、より複雑なアニメーションのインタラクションを実現することができます。

参考資料

よくある質問

Q1: `animation-fill-mode`と`animation-delay`の違いは何ですか？
A1: `animation-delay`はアニメーションの開始を遅らせるのに対し、`animation-fill-mode`はアニメーションが始まる前と終わった後に適用されるスタイルを制御します。
Q2: `animation-fill-mode`を`forwards`に設定した場合、アニメーションが終わった後に要素のスタイルを元に戻すにはどうすればよいですか？
A2: アニメーションが終わった後にJavaScriptを使って要素の`animation-name`プロパティを空文字列に設定するか、要素のクラスを削除または変更して、`animation-fill-mode`プロパティの値を変更します。
Q3: `animation-fill-mode`はすべてのブラウザでサポートされていますか？
A3: 主要なモダンブラウザではサポートされていますが、古いブラウザではサポートされていない場合があります。caniuse.comなどのウェブサイトで、特定のブラウザがサポートしているかどうかを確認できます。