【CSS】animation-fill-modeについての備忘録

animationが終了したあとに元に戻ってしまう!

既定値ではanimation-fill-modeのステータスはnoneなので、animationが終了したあとは元のcssに戻ります。
animationが終了したときに@keyframesのcssを適用したいときにはanimation-fill-modeのステータスをforwardsにすることで実現できます。

ここではanimation-fill-modeについて解説していきます。

animation-fil-modeとは

animation-fil-modeとは、animationが発火してから、

animation-deray中animation実行後にどこのcssを適用するかを設定するcssです


animation-fill-modeの指定には個別のcss設定のほか、animationのショートハンドとして設定も可能です。

animation-fill-mode: forwards;
animation: slide-animation 5s ease forwards;
/* どちらでもいいです */

animation-fill-modeのステータス一覧は以下のとおりです。

none(初期値)アニメーション終了時元のスタイルを適用
forwardsアニメーション終了時のスタイルを保持
backwardsアニメーション開始時のスタイルを直ちに適用
bothforwardsとbackwardsが両方適用

forwards・backwordsともに末尾のsを忘れずにつけましょうね!あまり使わないステータスなので、スペルミスで手詰まることは意外とあります。私だけかもしれませんが。

animationが終了したときの状態を設定する他にも、
animation-deray(animationが始まるまでの遅延時間を設定)がかかっている場合、その遅延時間中にどちらのcssを適用するかを設定できます。

一覧にするとこうなります。

プロパティderay中終了時
none元のcss 元のcss
forwards元のcss @keyframesのcss
backwards @keyframesのcss 元のcss
both @keyframesのcss @keyframesのcss

ここで実際のデモを見てみましょう

ここで使うコードは以下のとおりです。動きに関係のない部分は省略しています。

<div id="fill-mode_none" class="fill-mode_item">none</div>
<div id="fill-mode_forwards" class="fill-mode_item">forwards</div>
<div id="fill-mode_backwards" class="fill-mode_item">backwards</div>
<div id="fill-mode_both" class="fill-mode_item">both</div>

<style>
    .fill-mode_item {
            width: 150px;
            height: 40px;
            margin: 30px;
            background: lightblue; /* もとの色はlightblueです */
            border-radius: 20px;
            color: #fff;
            line-height: 40px;
            text-align: center;
        }
    @keyframes fill-mode_lecture {
        0% {
            background: pink; /* animation中はpinkになります */
            transform: translateX(0);
        }
        100% {
            background: pink;
            transform: translateX(100px);
        }
    }

    #fill-mode_none {
        animation: fill-mode_lecture 2s linear 3s  none;
    }
    #fill-mode_forwards {
        animation: fill-mode_lecture 2s linear 3s  forwards;
    }
    #fill-mode_backwards {
        animation: fill-mode_lecture 2s linear 3s  backwards;
    }
    #fill-mode_both {
        animation: fill-mode_lecture 2s linear 3s  both;
    }
</style>

色が変化して右に移動します。
animation-derayを3秒に設定していますので、ボタンを押してからの色の変わり方と動き出しについて確認してみてください。

none
forwards
backwards
both

deray中とanimation終了後にどちらのCSSが適用されているかに注目しましょう。

まとめ

animation終了後のcss設定のために使われることが多いですが、細かいanimationの調整にも使える設定もありますね。

ではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です