CSSのanimation-fill-modeでアニメーションの開始前や終了後のスタイル適用を制御し、視覚効果を調整する方法をわかりやすく解説

2024.09.13
スポンサーリンク

animation-fill-modeプロパティは、アニメーションが再生される前や終了後に、アニメーションがどのように要素のスタイルを適用するかを指定するために使用されます。これにより、アニメーションの開始や終了時に要素の見た目が変更されることをコントロールできます。

スポンサーリンク

animation-fill-modeプロパティの値とその効果

  • none: アニメーションの再生前および再生後に、アニメーションによるスタイル変更は行われません。
  • forwards: アニメーション終了後も、最終状態のスタイルが適用されたままになります。
  • backwards: アニメーション開始前に、初期状態のスタイルが適用されます。
  • both: アニメーション開始前はbackwards、終了後はforwardsの両方の効果が適用されます。

注意点と関連情報

animation-fill-modeプロパティは、アニメーションが再生されていない間に要素がどのように表示されるかを制御します。これにより、アニメーションの途中や終了後に要素の見た目が変わらず、滑らかな視覚効果を提供できます。特にforwardsとbothを使うと、アニメーション終了後のスタイルが維持されるため、デザインの一貫性を保つのに便利です。

animation-fill-modeが効かない理由として考えられること

アニメーションが正しく設定されていない

animation-fill-modeはアニメーションの開始前や終了後の状態を制御するプロパティですが、アニメーション自体が正しく設定されていないと、このプロパティは機能しません。
対策：@keyframesやanimation-nameが正しく設定されているか確認し、アニメーションが適用されているか確認します。

アニメーションの持続時間が0に設定されている

animation-durationが0の場合、アニメーションが実行されないため、animation-fill-modeも効果を発揮しません。
対策：animation-durationが適切に設定されているか確認し、正しい持続時間を設定します。

アニメーションが途中でリセットされている

アニメーションが繰り返し設定されている場合、次のアニメーションが始まる際に、animation-fill-modeがリセットされることがあります。
対策：animation-iteration-countやanimation-directionを適切に設定し、繰り返し動作が意図通りになっているか確認します。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        text-align: center;
    }
    .css-sample-box {
        margin: 20px 0;
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        display: inline-block;
        animation: css-sample-move 3s linear;
    }
    @keyframes css-sample-move {
        0% {
            transform: translateY(0);
            background-color: #4CAF50;
        }
        100% {
            transform: translateY(200px);
            background-color: #FF5722;
        }
    }

animation-fill-mode: none

animation-fill-mode: noneは、アニメーションの再生前および終了後に、アニメーションの影響を受けないスタイルが適用されます。アニメーションが再生されていない時は、元のスタイルが表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-fill-none"></div>
    </div>

CSSコード

.css-sample-animation-fill-none {
    animation-fill-mode: none;
}

表示結果

animation-fill-mode: forwards

animation-fill-mode: forwardsは、アニメーションが終了した後も、アニメーションの最終状態が維持されます。アニメーションが終了すると、その状態のまま固定されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-fill-forwards"></div>
    </div>

CSSコード

.css-sample-animation-fill-forwards {
    animation-fill-mode: forwards;
}

表示結果

animation-fill-mode: backwards

animation-fill-mode: backwardsは、アニメーションが開始する前に、アニメーションの初期状態が適用されます。これにより、アニメーション開始前からその効果が反映されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-fill-backwards"></div>
    </div>

CSSコード

.css-sample-animation-fill-backwards {
    animation-fill-mode: backwards;
}

表示結果

animation-fill-mode: both

animation-fill-mode: bothは、アニメーションの開始前はbackwards、終了後はforwardsの両方の効果を適用します。アニメーションがスムーズに開始し、終了後もその状態が維持されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-fill-both"></div>
    </div>

CSSコード

.css-sample-animation-fill-both {
    animation-fill-mode: both;
}

表示結果

まとめ

animation-fill-modeプロパティを使用することで、アニメーションが再生されていないときや終了後の要素のスタイルを柔軟に制御することができます。forwardsやbothを使うことで、アニメーション後のスタイルを維持し、backwardsを使うことで、開始前にスタイルを反映できます。適切な設定を行うことで、アニメーションの視覚的な滑らかさと一貫性が向上します。

スポンサーリンク