こんにちは。
CSSアニメーションを勉強しているとanimationプロパティに触れると思います。そこでもう少し細かい挙動を扱いたいと思ってインターネットサーフィンをしているとanimation-fill-modeというプロパティを聞いたことはないでしょうか？
そう思った経験はありませんか？
そこで今回は、入門者向けにanimation-fill-modeプロパティの
・各値の挙動の違い
についてサンプルコードを使いながら徹底解説します！
目次
animation-fill-modeとは
animation-fill-modeの読み方
animation-fill-modeは「アニメーション フィル モード」と読みます。
fillは日本語で「満たす」という意味です。animation-fill-modeは強いていうのであれば、アニメーションが開始される前、終了後どのような状態(モード)で待機する(満たす)かを指定するプロパティになります。
他のCSSプロパティと違い、すぐに日本語でイメージしづらいプロパティではありますね笑
animation-fill-modeはanimation-delayプロパティによって再生の開始が遅延されている間の表示、及び再生終了後の表示を設定するプロパティ
animation-fill-modeプロパティの用途を具体的にいうと、
です。
文章だけだと非常にわかりづらいので、後ほどサンプルコードと一緒に挙動を見ていきましょう。
animation-fill-modeで利用できる値
animation-fill-modeでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | @keyframes { } 内の指定とは無関係に表示します。(初期値) |
| forwards | 再生後は @keyframes の100%の表示のままにします。 |
| backwards | animation-delay の間は @keyframes の0%の表示のままになります。 |
| both | animation-delay の間は @keyframes の0%の表示、再生後は100%の表示にします。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
animation-fill-modeの基本的な使い方
animation-delayとは？
animation-fill-modeプロパティを解説する前に、まずanimation-delayプロパティの用途を抑えておきましょう。
animation-delayはアニメーション再生の開始を遅らせるプロパティです。
See the Pen
animation-delay by ryuga (@ryuga)
on CodePen.
上のサンプルコードは背景色が変わるアニメーションの開始時間を3秒遅らせた例です。
赤色の円が3秒後に青色になり、最後には緑になると思います。
また、再生後は .sphere に指定している背景色の赤色に戻ります。後々解説するanimation-fill-mode はこの再生後の状態を変更するプロパティでもあるので、この初期状態を覚えておきましょう。
実装例(forwards)
では早速実装していきましょう。
まずは forwards の挙動を解説します。forwards をつけると、アニメーション再生後は @keyframes の100%の表示のままになります。
See the Pen
animation-fill-mode–forwards by ryuga (@ryuga)
on CodePen.
先ほど、animation-fill-mode を指定していない状態だとアニメーション再生後は .sphere に指定している background-color の赤色になりましたね。
ですが上のサンプルコードのように、「 animation-fill-mode: forwards; 」を指定すると、アニメーション終了後は @keyframes の100%に指定している緑色の背景色のまま静止しているのがわかると思います。
このように、 forwards を指定するとアニメーション再生後の挙動を変更することができます。
実装例(backwards)
animation-fill-mode に backwards を指定すると、animation-delayの間は@keyframesの0%の表示にさせることができます。
これに関してもサンプルコードで確認していきましょう。
See the Pen
animation-fill-mode–backwards by ryuga (@ryuga)
on CodePen.
挙動をみてみると、animation-delay で遅延している2秒間は @keyframes の0%に指定している背景色の黄色になっていると思います。
そしてアニメーションが終了すると、.sphere に指定している背景色の赤色になって静止していると思います。
このように、backwards を指定すると遅延している間のアニメーションの状態を変更することができます。
実装例(both)
最後に both の解説をします。
both は今までの forwards や backwards を組み合わせたような値で、animation-delay の間は @keyframes の0%の表示、再生後は100%の表示にします。
See the Pen
animation-fill-mode–both by ryuga (@ryuga)
on CodePen.
挙動をみてみると、アニメーションが遅延している2秒間は @keyframes の0%に指定している背景色の黄色に、アニメーション終了後は @keyframes の100%に指定している背景色の緑色のまま静止しているのがわかると思います。
このように、both を指定するとアニメーションの遅延している間の状態と終了後の状態を変更することができます。
まとめ
いかがでしょうか？
今回はanimation-fill-modeプロパティの基本的な使い方と各値の実装例を解説していきました。
CSSアニメーションはJavaScriptで実装するアニメーションよりも軽量なので、今後も実装の機会が増えると考えられています。
ぜひマスターしておきましょう！！
参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode
