【CSS】「animation-fill-mode」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「animation-fill-mode」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「animation-fill-mode」を使うと「アニメーション前後でどのスタイルを適用するのか」の指定ができます。

また、下の動画でもCSSの「animation-fill-mode」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「animation-fill-mode」プロパティは「@keyframes」と一緒に使われる。

「animation-fill-mode」プロパティは単体で使うのではなく「@keyframes」を使ったアニメーションの定義と一緒に使われます。

なのでもし「@keyframes」の使い方がいまいち分からないという方は下記の記事で詳しくまとめているので、こちらも一緒に読んでみてください！

「animation-fill-mode」を使うと何ができるのか？

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 2s;
    animation-delay: 1s;
    margin-bottom: 20px;
    padding: 8px;
}
.none {
    animation-fill-mode: none;
}
.forwards {
    animation-fill-mode: forwards;
}
.backwards {
    animation-fill-mode: backwards;
}
.both {
    animation-fill-mode: both;
}
@keyframes width {
    0% {
        width: 100px;
        background-color: pink;
    }
    100% {
        width: 1000px;
    }
}

「animation-fill-mode」を使うと「アニメーション前後でどのスタイルを適用するのか」の指定ができます。

アニメーションが終わった後に「アニメーション終了時点のスタイル」を残すのか、残さないのかだったり、

「アニメーションの待ち時間の間」に「アニメーションのスタート地点のスタイル」を適用するのか、しないのか、の指定ができるプロパティになりますね。

ふむふむ。

アニメーションを設定する要素自体に「animation-fill-mode」の指定をする！

「animation-fill-mode」の指定は、アニメーションをつける要素に対して行えばOKです！

継承はなしなので、「animation-name」の指定がしてある要素に対して直接設定してあげてください。

「アニメーションのスタート地点のスタイル」というのは必ずしも「@keyframes」の「0%」のスタイルという訳ではない。

「アニメーションのスタート地点のスタイル」というのは必ずしも「@keyframes」の「0%」のスタイルという訳ではないです。

それは「animation-direction」の値によって異なるので、注意してください。

「animation-direction」が「reverse」の場合は「@keyframes」の「@keyframes」の「100%地点」がスタートのスタイルとなるので注意してください。

「アニメーションの終了地点のスタイル」は必ずしも「@keyframes」の「100%」のスタイルという訳ではない。

「アニメーションの終了地点のスタイル」は必ずしも「100%」のスタイルという訳ではないので注意してください。

「animation-direction」や「animation-iteration-count」の値によって変わります。

「animation-iteration-count」が「0.5」の場合は「50%地点」でアニメーションが終わりますので、そのスタイルが「アニメーションの終了地点のスタイル」となります。

「animation-fill-mode」に設定できる値は？

「animation-fill-mode」に設定できる値は下記の通りです。

• none（初期値）
• forwards
• backwards
• both

これらがありますね。

初期値は「none」です。

この動画で実際の挙動とコードの確認ができます。

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    animation-name: width;
    animation-duration: 2s;
    animation-delay: 1s;
    margin-bottom: 20px;
    padding: 8px;
}
.none {
    animation-fill-mode: none;
}
.forwards {
    animation-fill-mode: forwards;
}
.backwards {
    animation-fill-mode: backwards;
}
.both {
    animation-fill-mode: both;
}
@keyframes width {
    0% {
        width: 100px;
        background-color: pink;
    }
    100% {
        width: 1000px;
    }
}

実際のコードとその挙動を確認するのに使ってください！

「none」を使うと？（初期値）

「animation-fill-mode」に「none」を使うと、「アニメーションの実行の前後」で「アニメーションのスタイル」は適用されません。

つまり、「animation-delay」による「待ち時間の間」も「アニメーションのスタート地点のスタイル」は適用されないし、

「アニメーションが終了した後」は「アニメーションの終了地点のスタイル」は残りません。

「forwards」を使うと？

「animation-fill-mode」に「forwards」を使うと、「animation-delay」による「待ち時間の間」は「アニメーションのスタート地点のスタイル」が適用されません。

ですが、「アニメーションが終わった後」も「アニメーションの終了地点のスタイル」が適用され続けます。

「backwards」を使うと？

「animation-fill-mode」に「backwards」を使うと、「animation-delay」による「待ち時間の間」は「アニメーションのスタート地点のスタイル」が適用されます。

ですが、「アニメーションが終わった後」は「アニメーションの終了地点のスタイル」が適用されません。

「both」を使うと？

「animation-fill-mode」に「both」を使うと、「animation-delay」による「待ち時間の間」は「アニメーションのスタート地点のスタイル」が適用されます。

そして、「アニメーションが終わった後」は「アニメーションの終了地点のスタイル」が適用され続けます。

「カンマ区切り」で「複数の値」も書くことができる！

.box {
    animation-name: width, rotate;
    animation-fill-mode: both, forwards;
}

このように「animation-fill-mode」には「カンマ区切り」で「複数の値」を書くことができます。

その場合は、「animation-name」に書かれた順番に対応する形で「animation-fill-mode」の値がそれぞれのアニメーションに対して別々に指定される感じになります。

この辺の挙動は下記の記事で詳しくまとめているので、もし気になる方は下記の記事を読んでみてください！

参考リンク！

仕様書。
https://drafts.csswg.org/css-animations/#animation-fill-mode

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「animation-fill-mode」を使うと「アニメーション前後でどのスタイルを適用するのか」の指定ができる。

アニメーションを設定する要素自体に「animation-play-state」の指定をする！

「アニメーションのスタート地点のスタイル」というのは必ずしも「@keyframes」の「0%」のスタイルという訳ではない。

「アニメーションの終了地点のスタイル」は必ずしも「@keyframes」の「100%」のスタイルという訳ではない。

「animation-fill-mode」に設定できる値は下記の通りです。

• none（初期値）
• forwards
• backwards
• both

「カンマ区切り」で「複数の値」も書くことができる！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「animation-fill-mode」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！