フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

CSSアニメーション、
animation-fill-mode。

〽️何を扱っているのか。 〽️４つのサンプル。 〽️他のプロパティとの兼ね合い。 〽️複雑になってきた。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

何を扱っているのか。

animation-fill-modeには、４つの値が用意されています。

　① none（初期値。キーフレーム開始前と終了後、規定値を維持）

　② forwards（キーフレーム終了後、最後に採用されたキーフレームを維持）

　③ backwards（キーフレーム開始前、最初に採用されたキーフレームを維持）

　④ both（②と③の両方の条件を満たす）

意味がわかりません。

💧４つの値を理解するにあたって、下準備が必要です。

そもそも何をどうしているのか。
animation-fill-modeは、「キーフレーム開始前と終了後」に、どの状態を維持するかを指定します。
「アニメーションの前後」ではなくて、「キーフレームの前後」。
これは、どこを指しているのでしょうか？

次のようなCSSアニメーションを考えてみます。
既定値が背景色coral、キーフレーム0%は背景色がforestgreenに変わり、キーフレーム100%は背景色はそのままで右へと移動した状態です。 加えてここにanimation-delayを施します。「１秒」としましょう。

.sample { background-color:coral; animation:sample 2s 「「１1s」」; } @keyframes sample ｛ 0% { background-color:forestgreen; margin-left:0; } 100% { background-color:forestgreen; margin-left:80%; } ｝

このCSSアニメーションの流れはこの⬆︎ようになっています。
animation-delayを掛けているので、アニメーション自体が開始されてもキーフレームが開始されるまでに「待機時間」が発生しています。

animation-fill-modeが参照する「開始前」というのは、このdelayによる「待機時間」の部分を指します。つまり、「キーフレームが開始される前」ということですね。
animation-delayが発生している場合、CSSアニメーション自体の開始タイミングとは一致しません。

animation-fill-modeの参照する「終了後」は「キーフレームの完了後」を指します。これについてはCSSアニメーション自体の終了タイミングと常に一致します。

指定できる「状態」は、先ほど示した「既定値、最初に採用されたキーフレーム、最後に採用されたキーフレーム」です。

キーフレームの開始前を「既定値にするかor最初のキーフレームにするか」また、キーフレームの終了後を「既定値に戻すor最後のキーフレームの状態にするか」、
それらの指定を行うのが、animation-fill-modeプロパティなのです。

４つのサンプル。

animation-fill-modeの役割、お分かりいただけたでしょうか？
今度は実際のサンプルを通して、その動きを見ていきましょう。

#sample { 「「４/*既定値*/」」 background-color:coral; animation:sample 2s linear; } @keyframes sample｛ bb「「４/*最初のキーフレーム*/」」 bb0% { background-color:forestgreeen; margin-left:0; } bb「「４/*最後のキーフレーム*/」」 bb100% { background-color:forestgreen; margin-left:80%; }

先程のCSSアニメーション。animation-delayを一旦外した状態で試していきます。

 ① none（初期値）。

animation-fill-mode:「「１none」」;

初期値の「none」です。何も指定されない場合はこの値が採用されます。
キーフレーム開始前と開始後のいずれにも、「既定値」が採用さています。先程animation-delayの指定を外したので、「待機時間 = キーフレームの開始前」は存在しません。確認できるのはキーフレーム終了後の挙動だけです。

 ② forwards。

animation-fill-mode:「「１forwards」」;

「forwards」を指定すると、キーフレーム終了後には最後のキーフレームの内容が維持されます。先ほどと同じく見た目では確認できませんが、キーフレーム開始前は既定値が選択されています。

「CSSアニメーションで終わりの状態を維持する」ならこれですね。

扨（さて）ここで元のCSSアニメーションにanimation-delayを掛けてみます。

#sample { background-color:coral; animation:sample 2s linear 「「１1s」」; }

delayを指定したことで、キーフレームが開始されるまでに「1s」の待機時間ができました。 これを初期値noneのままで実行してみましょう。

待機時間中、つまり「キーフレーム開始前」は既定値の「背景色：coral」の状態が採用されています。

 ③ backwards。

「backwards」は、キーフレーム開始前に「最初のキーフレーム」を採用します。終了後は既定値のままです。

animation-fill-mode:「「１backwards」」;

先程の「none」におけるサンプルと比べてみてください。
アニメーションを実行すると先づ１sの待機時間に入りますが、そこでいきなり最初のキーフレーム「背景色：forestgreen」が採用されています。

 ④ both。

animation-fill-mode:「「１both」」;

「both」は②のforwardsと③のbackwardsの両方の条件を満たします。
キーフレーム開始前は最初のキーフレームの内容、キーフレーム終了時は最後のキーフレームの内容が採用されます。

③のbackwardsや④のbothは、JavaScriptなどを使ってCSSアニメーションを発火させたときに効果を発揮します。

他のプロパティとの兼ね合い。

animation-fill-modeは、他のCSSアニメーションプロパティとの兼ね合いによって、結果が変わってきます。

• CSSアニメーション08、animation-directionで再生方向を指定。
  

  2021.05.05
  アニメーションの順/逆再生や往復。

前回の記事⬆︎で紹介したanimation-directionは、「キーフレームの方向」を変化させるプロパティでした。
そして今回のanimation-fill-modeは、「最初と最後のキーフレーム」を扱うのでしたね。

ではfill-modeが「forwards」で、directionに「reverse」を適用した場合。
キーフレームの方向が逆転するため、fill-modeで「終了後に採用されるキーフレーム」の対象は0%のほうと成増。

#sample { animation:sample 2s linear 「「１reverse forwards」」; }

元々の「100%のキーフレーム」からCSSアニメーションが開始され、終了後は0%のキーフレームの状態が維持されます。

さらに。
animation-directionの「alternate」は、キーフレームの方向を反転させて繰り返すものでした。
そうすると、CSSアニメーションの繰り返し回数（animation-iteration-count）によっても「終了後に採用されるキーフレーム」は変わってきます。

・ iteration-countが「2」であれば、最後のターンはキーフレームが逆転しているので、終了後は0%のキーフレームが採用されます。

#sample { animation:sample 2s linear 「「１alternate forwards 2」」; }

・ iteration-countが「３」などの奇数の場合、最後のターンは順方向。
したがって終了後に採用されるのは100%のキーフレーム。

#sample { animation:sample 2s linear 「「１alternate forwards 3」」; }

このようにanimation-fill-modeは、他のプロパティからの影響を大きく受けることに成増。

コーディングを進める中で、思い通りのCSSアニメーションにならない場合には、周りのプロパティ指定についてもチェックしてみてください。

複雑になってきた。

最後までお読みくださり、ありがとうございます。
今回のanimation-fill-modeで、CSSアニメーションのプロパティは８つある中のの７つ目となりました。
知れば知るほど複雑になってきますね💧


フーノページのCSSアニメーション基本コーナーでは「入門者向け」とうたいながらも、実際はかなり深い内容まで掘り下げて紹介しています。従ってしっかりと内容を理解していただければ、「専門書レベルの知識を取得した」と言っていいでしょう。

残るプロパティは１つ、「animation-play-state」です。次回も頑張って学習していきましょう！
ではまた〜♫