神戸ホームページ制作プロ公式ブログ
6.222023
スタイルシート「CSSのanimation-fill-modeプロパティ」を全部教えて！
こんにちは、ハナさん。最新のWEB制作技術について勉強しているんですね！今回は「CSSのanimation-fill-modeプロパティ」についてお話ししましょう。これはアニメーションが終了した後に要素の状態を保持するためのプロパティです。デフォルトでは、アニメーションが終了すると元の状態に戻ってしまいますが、fill-modeを使うことでアニメーションが終了後も特定の状態を維持できます。例えば、forwardという値を指定することで、アニメーションの最終フレームを保持することができます。他にもいろいろな値がありますので、ぜひ試してみてくださいね。素敵なWEBデザインを作成するために、がんばってください！
このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。
CSSのanimation-fill-modeプロパティとは？
ハナ: リュウさん、お願いがあるんです！CSSのanimation-fill-modeプロパティって何ですか？
リュウ: ふむふむ、よく気づきましたね、ハナさん。animation-fill-modeプロパティは、アニメーションの終了後にどういう状態になるかを設定するプロパティですよ。
ハナ: そうなんですね！それで、終了後にCSSのスタイルがどうなるかということですか？
リュウ: その通りです！たとえば、animation-fill-modeをforwardsにすると、アニメーションが終了した状態を維持することができます。つまり、最後のキーフレームで設定したスタイルがそのまま適用されます。
ハナ: なるほど、最後のキーフレームのスタイルが残るんですね！わかりました、リュウさん、ありがとうございます！
リュウ: いいえ、どういたしまして！何か質問があったら、いつでも聞いてくださいね、ハナさん。
animation-fill-modeプロパティを使うメリットとは？
ハナ:リュウさん、animation-fill-modeプロパティって何ですか？
リュウ:ハナさん、animation-fill-modeプロパティはCSSアニメーションを実行した後の要素のスタイルを決めるプロパティです。例えば、アニメーションが終了した後に要素のスタイルをアニメーション前の状態に戻すか、アニメーションの最終フレームで停止した状態にするかを指定できますよ。
ハナ:なるほど！それで、animation-fill-modeプロパティを使うメリットは何ですか？
リュウ:そうですね、animation-fill-modeプロパティを使うメリットは、アニメーション後の要素のスタイルを細かく設定できることにあります。例えば、アニメーションで要素を拡大した後、そのままの大きさで表示させたい場合に使うことができますよ。また、リセットすることで再度アニメーションを実行することもできます。どうでしょうか、分かりやすいでしょうか？
ハナ:分かりました！ありがとうございます、リュウさん！
animation-fill-modeプロパティで指定できる値とは？
ハナ：リュウさん、こんにちは。animation-fill-modeプロパティで指定できる値って何があるんですか？
リュウ：うん、それはね、アニメーションが実行される前や後の状態を指定するプロパティだよ。指定できる値はnone, forwards, backwards, bothの４つだよ。noneを指定するとアニメーションが実行された後にもとの状態に戻るようになるけど、forwardsを指定するとアニメーションが実行された後の状態を保持したままにしておくことができるんだよ。
ハナ：なるほど！でも、後ろの２つの値ってどういう意味ですか？
リュウ：backwardsはアニメーションが実行される前の状態を保持するようになるんだ。一方、bothを指定するとアニメーションが実行される前と後の両方を保持できるようになっているんだ。分かりやすく例えると、君が大好きなおもちゃで遊ぶとき、遊ぶ前と後でおもちゃの場所が変わったとしよう。noneを指定すると、おもちゃを遊んでしまった後に元の場所に戻すことができるようになるよ。一方、forwardsを指定すると、おもちゃを遊んでしまった後の位置を保持しておけるようになるよ。backwardsを指定すると、おもちゃを遊ぶ前の位置を保持し、遊び終わった後には元の位置に戻した状態を保持できるようになるよ。最後に、bothを指定すると、おもちゃを遊んだ後の位置と遊ぶ前の位置を両方保持できるんだ。理解できたかな？
animation-fill-modeプロパティで指定できる値「none」とは？
ハナ:リュウさん、animation-fill-modeプロパティで指定できる値「none」とは何ですか？
リュウ: ふむふむ、ハナさん。animation-fill-modeプロパティはアニメーションが終わった後の最終的な状態を指定するプロパティです。そして、noneという値は、アニメーションの開始前と終了後の状態を指定しないという意味です。例えば、アニメーションが完了したら元の状態に戻したい場合は、noneではなく、forwardsを指定します。なんとなく分かりましたか？
animation-fill-modeプロパティで指定できる値「forwards」とは？
ハナ:「animation-fill-modeプロパティで指定できる値「forwards」とは？」ってなんですか？
リュウ:forwards」という値は、アニメーションが終了した後のスタイルを維持するためのものです。例えば、アニメーションで要素を左に移動するとして、最後のフレームでの位置を維持する場合に使用します。簡単な例えとして、就寝前に脱いだパジャマを朝までそのまま着ているような感覚ですね。
ハナ:なるほど！それで、他にもどんな値があるんですか？
リュウ:他にも、『none』でアニメーション終了後に最初のスタイルに戻るようにできます。『backwards』でアニメーション開始前のスタイルを表示することもできますよ。
animation-fill-modeプロパティで指定できる値「backwards」とは？
ハナ:リュウさん、animation-fill-modeプロパティで指定できる値「backwards」とは何ですか？
リュウ:「backwards」という値はアニメーション開始前のスタイルを保持し、最初のキーフレームに移行する際に、それらのスタイルを適用することができるというものです。例えば、ある要素にアニメーションを適用している場合、その要素に適用されるスタイルがありますが、アニメーションが終わった後もその要素に適用されるスタイルがある場合、「backwards」という値を指定することでそのスタイルを保持することができるのです。わかりやすく言うと、誕生日会の前に部屋を飾りつけ、誕生日会が終わっても飾りつけを維持することができるという感じです。理解してもらえましたか？
animation-fill-modeプロパティで指定できる値「both」とは？
ハナ:リュウさん、animation-fill-modeプロパティで指定できる値「both」とは何ですか？
リュウ:ねえ、ハナさん。animation-fill-modeプロパティはアニメーションの動きが終わった後に表示される要素のスタイルを指定するプロパティだよ。そして、「both」とは、アニメーションが始まる前のスタイルと、アニメーションが終わった後のスタイルを、両方とも適用することができるということだよ。例えば、アニメーションが終わった後にも、アイコンが元の大きさや色で表示されるといった具合にね。わかりやすいですか？
animation-fill-modeプロパティで指定した値「none」とはどういう挙動？
ハナ:リュウさん、こんにちは。animation-fill-modeプロパティで指定した値「none」とはどういう挙動なんですか？
リュウ:こんにちは、ハナさん。animation-fill-modeプロパティで指定した値「none」というのは、アニメーションが実行される前または後の要素のスタイル値をどうするか、ということを指定するものです。値が「none」の場合、要素のスタイルはアニメーション前後で変わりません。例えば、要素がアニメーション中に拡大する場合、アニメーションが終了した後も拡大されたままになります。
ハナ:なるほど、そういうことなんですね。分かりました。ありがとうございます、リュウさん！
リュウ:どういたしまして、ハナさん。もし、他にも質問があったら、いつでも聞いてくださいね。応援していますよ！
animation-fill-modeプロパティで指定した値「forwards」とはどういう挙動？
ハナ:リュウさん、こんにちは！animation-fill-modeプロパティで指定した値「forwards」とはどういう挙動なの？
リュウ:そうですね、ハナさん。「forwards」は、アニメーションが終了した後の状態を維持するための指定値です。例えば、ある要素を上にスライドさせるアニメーションを作ったとします。そのアニメーションが終了した後、要素を元の位置に戻すのではなく、アニメーションの最後の位置に要素を固定するように指定したい場合に「forwards」を使います。
ハナ:なるほど！要素を動かした後の状態を維持するってことですね。分かりました！
リュウ:そうですね。また、アニメーションが逆再生された場合には最初の値が維持されるようになります。このように「forwards」はアニメーションの最初と最後の状態を維持するための便利な指定値となっています。
animation-fill-modeプロパティで指定した値「backwards」とはどういう挙動？
ハナ：リュウさん、animation-fill-modeプロパティで指定した値「backwards」とはどういう挙動？
リュウ：ええと、animation-fill-modeプロパティは、アニメーションの開始前や終了後の要素のスタイルを指定するためのプロパティです。そして、「backwards」という値は、アニメーションが開始する前に、最初のキーフレームで指定されたスタイルを要素に適用します。つまり、最初のキーフレームのスタイルに戻るように要素を設定することができるということですね。
ハナ：なるほど、最初のキーフレームで指定したスタイルに戻るんだ。それって、おもちゃのカーを走らせたり止めたりするときのような感じかな？
リュウ：そうですね、おもちゃのカーを動かしたり止めたりするときに、カーの動きが停止した時に元の位置に戻るように設定しているのと同じですね。わかりやすい例えですね。
animation-fill-modeプロパティで指定した値「both」とはどういう挙動？
ハナ:「animation-fill-modeプロパティで指定した値「both」とはどういう挙動？」と聞きたいんですけど、リュウさん、教えてください！
リュウ:ふむふむ、よく聞いてくれましたね。animation-fill-modeプロパティで指定した値「both」とは、アニメーションが終了した後に、アニメーション開始前の状態と終了後の状態、両方を保持するということです。つまり、アニメーション後に最終状態を維持するので、アニメーションが終わっても要素の位置やスタイルが元に戻らないということですね。
ハナ:なるほど、要素の位置やスタイルが元に戻らないんですね！リュウさん、分かりやすく教えてくれてありがとうございます！がんばって勉強して、デザイナーになりたいと思います！
animation-fill-modeプロパティの初期値は何か？
ハナ: リュウさん、animation-fill-modeプロパティの初期値は何か知ってますか？
リュウ: それはね、デフォルトの初期値はnoneだよ。つまり、アニメーションが終わった後、元の状態に戻らないんだ。例えば、動いた要素が元の位置に戻らないっていうことだね。
ハナ: なるほど、noneだと戻らないんですね。ありがとうございます、リュウさん！
animation-fill-modeプロパティはアニメーション開始前から有効か？
ハナ：リュウさん、animation-fill-modeプロパティはアニメーション開始前から有効かな？
リュウ：そうですね、animation-fill-modeプロパティはアニメーションの開始前から有効です。例えば、ある要素に対してアニメーションを定義した場合、アニメーション開始前からその要素に対して指定したプロパティの値が有効になっています。そして、animation-fill-modeプロパティを利用することで、アニメーションが終了した後の値を指定することができます。たとえば、透明度を1から0に変化させるアニメーションで、animation-fill-modeプロパティをforwardsに指定した場合、アニメーションが終了した後の要素の透明度は0のままになります。
animation-fill-modeプロパティは複数指定することができるか？
ハナ:リュウさん、animation-fill-modeプロパティは複数指定することができるか知りたいんです。
リュウ:そうですね、animation-fill-modeプロパティは「none」「forwards」「backwards」「both」の4つの値を指定することができ、複数指定も可能です。例えば、「forwards」と「backwards」を同時に指定することで、アニメーションが終了した後も最後のフレームと最初のフレームの状態を保持することができますよ。わかりやすいでしょうか？
animation-fill-modeプロパティを使ってアニメーションの終了状態を保持する方法とは？
ハナ: もしもし、リュウさん！animation-fill-modeプロパティっていうのがあるんですけど、アニメーションの終了状態を保持するってどういう意味なんですか？教えてください！
リュウ: ああ、そうだね。例えばね、おじいちゃんの時計が止まっちゃったとするよ。針がいつもの位置に戻らないから、今何時かわからなくて困るでしょ？animation-fill-modeプロパティは、アニメーションが終わっても最後の状態を保持しておくということさ。つまり、自分で設定したアニメーションが終わったときに、その最後の状態を保持できるってことだよ。
ハナ: あー、なるほど！針が戻らないと何時かわからないってことですね。アニメーションも同じように、最後の状態を保持しておくと便利そうですね。ありがとうございました、リュウさん！
animation-fill-modeプロパティと「animation-direction」プロパティの併用方法とは？
ハナ: リュウさん、animation-fill-modeプロパティと「animation-direction」プロパティの併用方法教えてください！
リュウ: まず、animation-fill-modeプロパティはアニメーションが終了した後のスタイルを指定するものです。例えば、「forwards」を指定すると、アニメーションが終了した時点で最後のフレームが固定されます。一方、「animation-direction」プロパティはアニメーションの再生方向を指定するものです。例えば、normalを指定すると正順に、reverseを指定すると逆順に再生されます。これら2つのプロパティを併用する際には、まず「animation-direction」で再生方向を指定し、その後に「animation-fill-mode」でアニメーションが終了した時のスタイルを指定します。分かりやすいですか？
animation-fill-modeプロパティと「animation-play-state」プロパティの併用方法とは？
ハナ：リュウさん、animation-fill-modeプロパティと「animation-play-state」プロパティの併用方法とは？
リュウ：ふむふむ、それはね、アニメーションの再生状態や終了後の表示状態を制御するプロパティだよ。animation-play-stateはアニメーションの再生・停止を制御するプロパティで、animation-fill-modeはアニメーションの終了後に要素が保持するスタイルを指定するプロパティだよ。両方を併用することで、アニメーションの再生と停止、そして終了後の状態の制御が可能になるんだよ。
ハナ：なるほど、そういうことなんだね。ありがとうございます、リュウさん！
リュウ：どういたしまして、ハナさん。もしわからないことがあればいつでも聞いてね！
animation-fill-modeプロパティはどのような場面で使われるか？
ハナ:リュウさん、animation-fill-modeプロパティって何に使うの？
リュウ: ふむふむ、よく質問ができましたね。animation-fill-modeプロパティは、アニメーションが終了したあとのスタイルを指定するものです。例えば、画像をグルグル回転させるアニメーションを作成したとします。アニメーションが終わると、グルグル回転していた画像が元の位置に戻ります。その時、animation-fill-modeプロパティで指定したスタイルによって画像の表示が変わります。わかり易く言うと、アニメーションが終わっても残したいスタイルを指定するものですね。
animation-fill-modeプロパティの使い方を誤るとどのような問題が起こるか？
ハナ:リュウさん、animation-fill-modeプロパティの使い方を誤るとどのような問題が起こるの？
リュウ:ハナさん、animation-fill-modeプロパティはアニメーションが終了した後の要素のスタイルを指定します。誤ったプロパティの使用は、アニメーション結果が失われる可能性があります。例えば、アニメーション後にスタイルがリセットされたり、時間が早められる場合があります。
ハナ:リセットされるんですか？どうしてですか？
リュウ:その場合、アニメーションの最初のスタイルが再び適用されることがあります。例えば、ボタンが左寄せに移動した後にリセットされると、ボタンが再び左端に戻ってしまうことがあります。
ハナ:わかりました！プロパティの使い方を間違えないように気をつけます。ありがとうございました、リュウさん！
リュウ:どういたしまして、ハナさん。いつでも質問してくださいね。
