CSSアニメーション終了後の形を維持！animation-fill-modeの使い方を完全ガイド
生徒
「CSSでアニメーションを作ったのですが、動きが終わった瞬間にパッと最初の状態に戻ってしまいます。終わった時の形のまま止めておく方法はありますか？」
先生
「それは『animation-fill-mode（アニメーション・フィル・モード）』を使えば解決できますよ。アニメーションの実行前や実行後の見た目をどうするか決める命令です。」
生徒
「フィルモード……少し難しそうな名前ですね。具体的にはどう書けばいいんですか？」
先生
「設定自体はとてもシンプルです。初心者の方でもすぐにマスターできるので、一緒に詳しく見ていきましょう！」
1. animation-fill-modeとは？アニメーションの前後を制御する機能
ウェブサイトで要素を動かすCSSアニメーションには、実は「実行前」「実行中」「実行後」という3つの時間軸があります。通常、何も設定していないと、アニメーションが終わった瞬間に、その要素は元のスタイル（アニメーションを始める前の状態）に強制的に戻されてしまいます。これを制御するのがanimation-fill-mode（アニメーション・フィル・モード）というプロパティです。
プログラミング未経験の方に分かりやすく例えると、これは「舞台の幕」のようなものです。劇が終わった後、役者が元の立ち位置に戻ってから幕を下ろすのか、それともポーズを決めたまま幕を下ろすのかを選ぶことができます。パソコンを触ったことがない方でも、「終わった後の状態をキープしたい時はこれを使う」と覚えておけば大丈夫です。
この機能を使うことで、例えば「ボタンがフワッと出てきて、そのまま表示され続ける」といった自然な演出が可能になります。もしこの設定を忘れてしまうと、せっかく現れたボタンが動き終わった瞬間に消えてしまったり、不自然な動きに見えたりすることがあります。SEO対策としても、ユーザーにとって使いやすい滑らかなサイトを作ることは非常に重要です。
2. 終了時のスタイルを維持するforwardsの設定方法
もっとも頻繁に使われる設定がforwards（フォワード）です。これは英語で「前方へ」や「送り出す」といった意味がありますが、CSSでは「アニメーションの最後のコマの状態をそのまま維持する」という命令になります。
例えば、左から右へ移動するアニメーションを作った場合、forwardsを指定しておけば、移動しきった右側の位置でピタッと止まります。これを指定しないと、右に移動した瞬間にワープするように左側の初期位置に戻ってしまいます。サイトの訪問者を驚かせないためにも、一方向の動きにはこの設定が欠かせません。
書き方は非常に簡単で、アニメーションの設定の中に「animation-fill-mode: forwards;」と書き加えるだけです。難しい計算や複雑な手順は一切不要です。まずはこの一番便利な設定からマスターしていきましょう。
<style>
@keyframes move-right {
from { transform: translateX(0); }
to { transform: translateX(200px); background-color: #ffc107; }
}
.box-forwards {
width: 100px;
height: 100px;
background-color: #007bff;
animation-name: move-right;
animation-duration: 2s;
/* アニメーション終了時の状態を維持する */
animation-fill-mode: forwards;
}
</style>
<div class="box-forwards"></div>
<p>2秒かけて移動し、黄色くなったまま止まります。</p>
3. 実行前のスタイルを先に適用するbackwardsの効果
次に紹介するのはbackwards（バックワード）です。これはforwardsの逆で、「アニメーションが始まる前の待機時間に、最初のコマのスタイルを先に適用しておく」という設定です。少しイメージしにくいかもしれませんが、アニメーションに待ち時間（ディレイ）があるときに威力を発揮します。
例えば、3秒後にアニメーションが始まるように設定している場合、通常はその3秒間は元のスタイルで表示されます。しかしbackwardsを使えば、待機している3秒間のうちから、アニメーションの「0%」の時の色や形になって準備をしてくれます。
これは、ページを読み込んだ瞬間に「今は見えていないけれど、アニメーションが始まったらすぐに見えるようにしたい」といった細かい演出に役立ちます。パソコン初心者の方は、まずは「待機中の見た目に関わるもの」と捉えておけば良いでしょう。
<style>
@keyframes fade-in-yellow {
0% { opacity: 1; background-color: yellow; }
100% { opacity: 1; background-color: red; }
}
.box-backwards {
width: 100px;
height: 100px;
background-color: blue; /* 元の色は青 */
animation-name: fade-in-yellow;
animation-duration: 2s;
animation-delay: 2s; /* 2秒待ってから開始 */
/* 開始前から0%の状態（黄色）を適用する */
animation-fill-mode: backwards;
}
</style>
<div class="box-backwards"></div>
<p>最初は青ですが、backwardsのおかげですぐ黄色になり、2秒後に赤へ動きます。</p>
4. 両方の良いとこ取りをするbothの設定
both（ボース）は、その名の通り「両方」という意味で、これまでに説明したforwardsとbackwardsの両方の機能を同時に適用します。つまり、「アニメーションが始まる前は最初のコマの状態になり」「アニメーションが終わった後は最後のコマの状態で止まる」という最強の設定です。
実際のウェブ制作の現場では、このbothがよく使われます。なぜなら、アニメーションの始まりから終わりまで、意図した通りの見た目をずっとキープできるからです。いちいち「前はどうする？後ろはどうする？」と悩むのが面倒なときは、とりあえずbothを試してみるというのも一つの手です。
プログラミングを始めたばかりの頃は、設定が多すぎて混乱しがちですが、このbothさえ覚えておけば、多くのアニメーションを自然に見せることができます。複雑な動きを作りたいときは、この「両方適用」の魔法を思い出してください。
<style>
@keyframes appearance {
0% { transform: scale(0); background-color: green; }
100% { transform: scale(1); background-color: purple; }
}
.box-both {
width: 100px;
height: 100px;
background-color: gray;
margin: 20px;
animation-name: appearance;
animation-duration: 2s;
animation-delay: 1s;
/* 開始前は緑（0%）、終了後は紫（100%）を維持 */
animation-fill-mode: both;
}
</style>
<div class="box-both"></div>
<p>待機中は緑色で小さく、動き終わると紫色で止まります。</p>
5. 何も適用しない標準状態のnoneについて
最後に紹介するのがnone（ノン）です。これは標準の設定で、「何もしない」という意味になります。アニメーションの期間中だけスタイルが適用され、始まる前や終わった後は、その要素が元々持っているスタイルに戻ります。
一見、不便そうに見えますが、「一時的に注目を集めるために点滅させたいけれど、終わったら元通りにしておきたい」という場合には最適です。あえて元の状態に戻すことで、サイトのレイアウトを崩さないようにすることができます。
基本的には、このnoneが最初から選ばれているため、もしあなたが「アニメーションが終わった後に形が戻ってしまう！」と困っているのであれば、それは設定がnoneのままになっているからです。状況に合わせて、forwardsやbothに書き換えてみましょう。
6. animationプロパティでまとめて書く方法
これまで「animation-fill-mode」と個別に書いてきましたが、実は「animation」という一つの項目にまとめて書くこともできます。これをショートハンド（略記法）と呼びます。プログラミングに慣れてくると、こちらの方が短くて書きやすくなります。
書き方の例としては、animation: move-right 2s forwards; のように、スペースで区切って並べるだけです。コンピュータは賢いので、書かれた単語を見て「これは名前だな」「これは時間だな」「これはフィルモードだな」と自動的に判断してくれます。
未経験の方は、まず「名前（name）」と「時間（duration）」、そしてこの「フィルモード（fill-mode）」をセットで書く習慣をつけると良いでしょう。この3つが揃うだけで、アニメーションの制御がぐっと楽になり、検索エンジンにも好まれるような洗練されたコードに近づきます。
<style>
@keyframes jump {
0% { transform: translateY(0); }
100% { transform: translateY(-50px); }
}
.box-short {
width: 80px;
height: 80px;
background-color: #e83e8c;
/* 名前 時間 フィルモードをまとめて指定 */
animation: jump 1s both;
cursor: pointer;
}
</style>
<div class="box-short"></div>
<p>まとめて書くことで、スッキリとしたコードになります。</p>
7. 初心者が陥りやすいミスと注意点
フィルモードを使っているのに上手く動かない時は、いくつか確認すべきポイントがあります。もっとも多いのはスペルミスです。「forwards」の最後の「s」を忘れていないか、しっかり確認しましょう。また、コロン（:）やセミコロン（;）が全角文字になっていないかも、パソコン操作に慣れていない方がつまずきやすい点です。
もう一つの注意点は、animation-iteration-count（繰り返し回数）との関係です。もしアニメーションを「infinite（無限）」に繰り返すように設定している場合、アニメーションに終わりがないため、forwardsの効果（終了時の維持）は現れません。無限に動くものに対して終了後の設定をしても意味がない、というのは論理的で分かりやすいですね。
さらに、アニメーションが複数ある場合も注意が必要です。どの台本（キーフレーム）に対してどのフィルモードを適用しているのか、一つずつ丁寧に確認する癖をつけましょう。焦らずゆっくり取り組むことが、プログラミング学習の最大のコツです。
8. ユーザー体験を高めるためのアニメーション設計
なぜここまで細かく終了後のスタイルを気にする必要があるのでしょうか。それは、ウェブサイトを訪れるユーザーにとっての「心地よさ」に直結するからです。例えば、重要なお知らせがフワッと出てきたのに、読み終わる前にパッと消えてしまったら、ユーザーは混乱してしまいます。
SEOの観点からも、Googleなどの検索エンジンは「ユーザーにとって有益で使いやすいサイト」を高く評価します。ガタガタと不自然に動くサイトよりも、滑らかにアニメーションし、適切な位置で止まるサイトの方が、結果として多くの人に見てもらえる可能性が高まります。
難しい言葉を使う必要はありません。「見てくれる人が気持ちよく操作できるように」という思いやりを持ってコードを書くことが、技術の向上にも繋がります。animation-fill-modeは、そんなあなたの「親切心」を形にするための素晴らしいツールなのです。
9. 実践！サンプルを組み合わせて自分だけの動きを作ろう
ここまで学んだ知識を活かして、色々な設定を組み合わせてみましょう。背景色を変える、大きさを変える、位置をずらす。これらの動きに対して、forwardsやbothを使い分けることで、驚くほど多彩な表現が可能になります。
パソコン初心者の方におすすめの練習方法は、まずサンプルコードの数字を少しだけ変えてみることです。「2s」を「5s」にしてみたらどうなるか、「200px」を「50px」にしたらどう動くか。こうした小さな実験の積み重ねが、あなたの中に「プログラミングの感覚」を養ってくれます。
失敗してもパソコンが壊れることはありません。むしろ、動かなかった理由を探すこと自体が、最高のリサーチ（調査）の勉強になります。自分だけのオリジナルアニメーションが完成した時の喜びを、ぜひ体験してみてください。
10. まとめへの一歩！フィルモードを使いこなす楽しさ
CSSアニメーションの世界は奥が深く、今回学んだanimation-fill-modeはその入り口に過ぎません。しかし、この「終了後の状態を操る」という技術を手に入れたことで、あなたの作るウェブサイトは一気にプロの仕上がりに近づきました。
最初は難しく感じた横文字の命令も、実際に動く様子を見ることで少しずつ親しみが湧いてきたのではないでしょうか。プログラミングは魔法ではなく、コンピュータへの丁寧なお願いの積み重ねです。一つ一つのキーワードに込められた意味を大切にしながら、これからも学習を続けていきましょう。
動きのある魅力的なページは、訪れる人を楽しい気持ちにさせてくれます。今回学んだテクニックを駆使して、ぜひ世界に一つだけの素敵なサイトを作り上げてくださいね。あなたのクリエイティブな挑戦を、心から応援しています！
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
