VIDEO LESSON

CSSのanimation-fill-modeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:12動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・フィル・モードです。
0:07このプロパティが担当するのは、アニメーションが動いている最中ではなく、その「前」と「後」です。
0:13開始までの遅延の間、どんな姿で待つのか。
0:16再生が終わったあと、最後の姿のまま止まるのか、元の姿に戻るのか。
0:20それを決めるのがフィル・モードです。
0:23値は、ノン、フォワーズ、バックワーズ、ボウスの四つです。
0:27再生中の動きそのものは、キーフレームと再生時間で決まります。
0:31フィル・モードは、その外側の時間の見た目を整える指定だと考えてください。
0:36順番に、違いと効く条件を見ていきましょう。
0:39四つの値を整理します。
0:41ノンは、初期値でもある指定で、アニメーションの前後にはキーフレームを当てません。
0:48遅延中も終了後も、要素本来のスタイルで表示されます。
0:52フォワーズは「後ろ」担当で、再生が終わっても、最後のキーフレームの姿をそのまま保ち続けます。
1:00バックワーズは「前」担当で、開始までの遅延の間、最初のキーフレームの姿を先取りして当てます。
1:08そしてボウスは、バックワーズとフォワーズの両方、つまり前も後ろもキーフレームで埋める指定です。
1:16名前の通り、前後の空白をフィル、つまり埋めるのが、このプロパティの役目です。
1:22書き方を確認します。
1:24対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順です。
1:30画面の例では、クラス名デモの要素に、ボウスを指定しています。
1:35フィル・モードは、アニメーションの一括指定の中に含めて書くこともできます。
1:41ただ、注意点が一つ。
1:43一括指定には、省略した関連プロパティを初期値に戻す働きがあるため、一括指定よりも前にフィル・モードを書いてしまうと、
1:48ノンに戻されて消えてしまいます。
1:54順序のトラブルを避けるには、実例のように、個別プロパティの行として後ろに書き足すのが安全です。
2:02前提として、フィル・モードも単独では何も起こしません。
2:06土台に、キーフレームで定義した動きと、それを再生するアニメーションの指定が必要です。
2:12記事の例では、横へ一レム移動するスライドインと、不透明度が〇・四から一へ変わるフェードインの、
2:17二つの動きが用意されています。
2:21そして、もう一つ大事なのが遅延、ディレイです。
2:24遅延がゼロなら、アニメーションはすぐに始まるので、「前」の状態を考える場面がそもそも生まれません。
2:32バックワーズやボウスの効果が見えるのは、遅延のあるアニメーションのときだと覚えてください。
2:38実例です。
2:39デモという要素に、スライドインを一秒、イーズ、遅延〇・三秒、一回だけ、というアニメーションを指定し、
2:46最後の行でフィル・モードをボウスにしています。
2:52時間の流れで見てみましょう。
2:55ページを開いた直後の〇・三秒間は遅延中です。
2:59ボウスにはバックワーズの働きが含まれるので、この間、要素はフロムの姿、つまり移動前の位置で待機します。
3:08再生が始まって一秒動き、終わったあとは、フォワーズの働きで、トゥーの姿、
3:13右へ一レムずれた位置に留まり続けます。
3:18前と後、両方ともキーフレームで埋まるわけです。
3:22最後の行の値をノンに置き換えて、比べてみます。
3:26ノンでは、再生が終わった瞬間に、要素は本来のスタイルへ戻ります。
3:32今の例では、右へ一レムずれた位置から、元の位置へぱっと戻って見えるはずです。
3:39一方、「前」の違いには条件があります。
3:42遅延中に当てるのはフロムの姿ですが、フロムと要素本来の姿が同じなら、ノンでもボウスでも見た目は変わりません。
3:52たとえばフェードインのように、フロムの不透明度が〇・四で本来の姿と違う動きでは、
3:58遅延中、薄い姿で待つか、本来の濃さで待つか、はっきりした差になります。
4:05誤解しやすい点を押さえます。
4:07フォワーズで終了後の姿が保たれるといっても、それはアニメーションが当てた状態が表示され続けるだけで、
4:14要素の元のシーエスエス宣言や、エイチティーエムエルの属性が書き換わるわけではありません。
4:21開発者ツールでスタイルズを見ても、宣言そのものは元のままです。
4:26また、保たれている状態は絶対ではありません。
4:29あとから別のアニメーションが始まったり、より強い指定が来たりすれば、そちらに置き換わります。
4:36終わったあともカスケードの中にいる、という感覚で捉えてください。
4:41重なりの変化など、周囲への影響が気になるときも、この前提で確認すると整理しやすくなります。
4:48基本情報を整理します。
4:49初期値はノンです。
4:51何も指定しなければ、アニメーションの前後にキーフレームは当たらず、終了後は本来の姿に戻ります。
4:57継承はしません。
4:58親要素にボウスを指定しても、子要素のアニメーションの前後までは変わらないので、
5:02目的の要素それぞれに指定します。
5:06複数のアニメーションを同時に使う場合は、カンマ区切りで動きごとに指定することもできます。
5:13また、ほかのプロパティと共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども指定できますが、
5:18普段は四つの値で十分です。
5:23効かないと感じたら、順番に確かめます。
5:25第一に、そもそも出番があるかです。
5:28遅延がなく、アニメーションが繰り返し再生され続ける設定では、前後の空白そのものが発生しません。
5:35第二に、書き方の順序です。
5:37一括指定のアニメーションより前にフィル・モードを書くと、初期値のノンに巻き戻されます。
5:43そして、スタイルシートが読み込まれているか、セレクターが合っているかを確認し、
5:49スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終的な値を見ます。
5:55動きを減らす設定向けに、アニメーション自体を止める指定が入っている場合は、
5:59フィル・モード以前に、動きそのものが無効になっています。
6:04ブラウザー互換性です。
6:05アニメーション・フィル・モードは、クロームが四十三以降、エッジが十二以降、
6:10ファイアフォックスが十六以降、サファリが九以降で対応しています。
6:15モバイルでは、アンドロイド版クローム四十三以降、アイオーエス版サファリ九以降が目安です。
6:21さらに、ボウスやノンといった値自体は、クローム三以降、ファイアフォックス五以降、
6:25サファリ五以降と、ずっと古い時代から扱えます。
6:29現在の主要ブラウザーでは接頭辞なしで問題なく使えるので、期待と違う動きをしたときは、
6:34互換性よりも、遅延や繰り返しの条件、指定の順序を先に疑いましょう。
6:39練習とまとめです。
6:41まず、ボウスとノンで、遅延中と終了後の姿がどう違うかを、自分の言葉で説明してみてください。
6:47次に、記事のサンプルで、最後の行の値だけを一つずつ変えて、ブラウザーを再読み込みしながら結果を比べます。
6:54一度にいくつも書き換えず、一つ変えて、一つ確かめるのが上達の近道です。
6:58関連するプロパティとして、遅延を決めるディレイ、再生と停止を切り替えるプレイ・ステートの記事もあわせてどうぞ。
7:06今回の要点は、フィル・モードは、アニメーションの前と後をキーフレームで埋める指定、
7:09です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-fill-modeの役割と主な指定値を解説。遅延中と終了後の位置がキーフレームに従って保たれるかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-fill-modeの使い方：指定値・実例・効かない原因とブラウザー互換性 →