animation-fill-mode

[animation-fill-mode]はアニメ開始前と後の状態を指定するものなので、animation-iteration-count が infinite で繰り返し、 animation-delay の開始待ちがない場合は関係ない指定となります。
基本的にアニメが回数指定の場合や、アニメに開始前遅延がある場合で、アニメのスタイルにしておきたい時は「animation-fill-mode:both」を指定しておけば不自然にならないかと思います。（作り方にもよりますが…）

サンプルの内容【例1 animation-fill-modeの基本実験】

開始待ちの遅延(animation-delay)なしでテスト。
Aボックス基本指定のみ。(左右位置に関係するのは position:relative;left:0px;)
Bはアニメ開始状態のみ。Aの状態から translate(50px)
Cはアニメ終了状態のみ。Aの状態から translate(200px)
Dはアニメ繰り返し。(animation-fill-mode:both … 繰り返しなので関係ないけど)
Eはアニメ3回。(animation-fill-mode:both) → 終了後 C 状態を維持
Fはアニメ3回。(animation-fill-modeの指定なし) → 終了後 A 状態
Gはアニメ3回。(animation-fill-mode:backwards) → 終了後 (終了時の指定は)Fと同じ
Hはアニメ3回。(animation-fill-mode:forwards) → 終了後 C 状態を維持
Iはアニメ alternate で 2回。(animation-fill-mode:both;) → 終了後 B 状態(反転で終了)
Jはアニメ alternate で 2回。(animation-fill-modeの指定なし) → F、Gと同じ
Kはアニメ alternate で 2回。(animation-fill-mode:backwards) → F、Gと同じ
Lはアニメ alternate で 2回。(animation-fill-mode:forwards) → 終了後 B 状態(反転で終了)

例1のアニメ設定、キーフレーム設定を表示

例1へ

サンプルの内容【例2 animation-fill-modeの基本実験2】

開始待ちの遅延(animation-delay) 120s でテスト。
Aボックス基本指定のみ。(左右位置に関係するのは position:relative;left:0px;)
Bはアニメ開始状態のみ。Aの状態から translate(50px)
Cはアニメ終了状態のみ。Aの状態から translate(200px)
Dはアニメ繰り返し。(animation-fill-mode:both) → 開始待ち B (both)
Eはアニメ3回。(animation-fill-mode:both) → 開始待ち B (both)
Fはアニメ3回。(animation-fill-modeの指定なし) → 開始待ち (指定なし)で A 状態
Gはアニメ3回。(animation-fill-mode:backwards) → 開始待ち B (backwards指定)
Hはアニメ3回。(animation-fill-mode:forwards) → 開始待ち A 状態
Iはアニメ alternate で 2回。(animation-fill-mode:both;) → 開始待ち B (both)
Jはアニメ alternate で 2回。(animation-fill-modeの指定なし) → 開始待ち A 状態
Kはアニメ alternate で 2回。(animation-fill-mode:backwards) → 開始待ち B (backwards指定)
Lはアニメ alternate で 2回。(animation-fill-mode:forwards) → 開始待ち A 状態

例2のアニメ設定、キーフレーム設定を表示

例2へ

ネタコラム

なんとなく、アニメーションの場合、アニメが終了した時はそのままの状態になるか、開始時の状態のどちらかになるのではないか？などと考えがちだけど、 初期値 nomalが「アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない」という仕様になっています。
なので、回数指定のアニメが終了した時に、そのままの状態で止まってほしい時は animation-fill-modeで forwards 又は both を指定する必要があります。（記述が短いのでbothでいいのではないかと思ったりもします）

animation の fill な mode という名称なので勘違いしやすいのが「アニメ終了時に、開始状態のスタイルか終了状態のスタイルを選べる」のではない、という点かと思います。
解説しているwebサイトによっては「アニメ再生中以外の状態を指定」と書いてあったり、 また別のサイトでは「backwards…アニメーション実行後のスタイルは、(中略) 通常は0%もしくはfromが…」などと書いてあったりしますが、 いろいろ実験していると、これらの記事は仕様を勘違いしてるような印象でした。

実際は「開始前の遅延待ちの時だけ」か「終了後だけ」か「開始前遅延と終了後の両方」の場合に、オブジェクトにアニメで変化させるスタイル(0% or 100%)を適用するかどうかを指定する、というものになります。

要するに、「終了時に A(0%) or B(100%)を選択する」のではなく、
「A(0%)B(100%)を自動判定したスタイルを適用する」のは
「適用しない(normal)」
「開始前のみ(backwards)」
「終了時のみ(forwards)」
「開始前と終了時の両方(both)」
のどれかを選択する、ということになります。
※[backwards] の隠れた意味としては「アニメ終了時の状態を指定しない」（アニメ以外のスタイルに丸投げ）、ということで、これは結構重要ポイントなのではないかと思ったりします。

この項目を説明してるwebサイトで、both の説明文が超シンプルに「forwardsとbackwardsの両方の規定に従います」
というMDN等のサイトにある記事のコピペになっている場合（あ、下記のdd説明文が同じ文言だった…）、
終了時の状態を指定、という勘違いと矛盾する『両方の規定』（終了時にAかBを…と勘違いしてるので、bothってなんだ？両方ってなんだ？0%100%反転偶数奇数自動判定なのか？とか？）の意味がわからないので、さらぬ神にたたりなし説明になってる場合があるのではないかと思ったりします…。

なので、「animation-fill-mode」は「アニメーションを終了した際」に「再生開始直後の状態に戻す」又は「再生終了直前の状態のままにする」の「どちらにするかが選べる」(*1)のではなく、
指定オブジェクトのスタイルを「開始前の遅延待ち状態だけ指定する(backwards)」か「終了後の状態だけ指定する(forwards)」か「開始前遅延と終了後の両方を指定する(both)」を「選べる」というもの、になります。

…ということで、[backwards](だけ)のような指定をすると、例1（や例2の120s待ってアニメした後）のＧのように、「アニメ終了後」はアニメのスタイル(例では、[ta_1]キーフレームのスタイル)は無視された ( nomal = 指定なしと同じ) Aの状態になる、というのが実験結果で、 結局、退屈な印象しかないこのページの案外重要な結論は「both」を指定しておけば、なんとなく安心、ということになります。
あと、[backwards]は開始の遅延待ちがある繰り返しアニメ、[forwards]は遅延待ち状態がない回数指定のアニメ、で使用するのが基本的な使い方、ということになります。
※ animation-fill-modeでなにか面白いテクニックは…などと考えてみたけれど、特になにも思いつかなかったので、仕様を確認するだけの退屈な実験ページになってしまいました。

[1]どちらにするかが選べるだけなら、意味的に、both ってなんやねん、いらんやん。となるし、
逆に、アニメ再生中以外の状態が、both以外は「前」か「後」に固定されたら、
左→アニメで右移動→右終了位置からいきなり左にワープして停止（再生開始直後の状態に戻す）、
右→左にワープ後右に移動→右で停止（再生終了直前の状態のままにする）、
などのように移動アニメなら不自然なワープが必ず間に入ってしまうことになるので、 結局 both しかいらんやん、ってことになってしまいます…。

animation-fill-mode まとめ

アニメ（ @keyframe… ）で指定のスタイルにしたいなら。
・開始の遅延なし ＆ 繰り返しの場合、animation-fill-modeは、指定不要。
・開始の遅延なし ＆ 回数指定の場合、animation-fill-modeは、[forwards]
・開始の遅延あり ＆ 繰り返しの場合、animation-fill-modeは、[backwards]
・開始の遅延あり ＆ 回数指定の場合、animation-fill-modeは、[both]
・考えるのがめんどう or よくわからない場合、animation-fill-modeは、[both]
※繰り返しが偶数か奇数か + alternate(反転) は [forwards] の仕様でアニメ終了時のスタイルのまま停止、なのでブラウザにおまかせです。(例1のHとL参照)
…人が考える意味的には奇数ならアニメ100%(終了)、偶数なら0%(開始)の状態になる、などと説明文でわかりづらくなったりするけれど、感覚的にアニメが最後にたどりついた状態で止まるので、杉下右京 のように細かいことが気になる人以外は特に、何も考えずに走れ (by ジャミル) と both にしておけば問題ないかと思います。
※原森が参照しまくっているMDNのサイトにあったりする、 奇数 or 偶数 + alternate等(animation-direction) + animation-fill-mode:forwards でどの状態で開始・停止なのかの表やその説明文はそれほど重要なものではなくて、逆にそれを一所懸命考えようとするからなんだか分からなくなってしまいがちなのかもしれない、などと思ったり…。

animationのプロパティ

animation-name CLICK

適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。

animation-duration CLICK

1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。

animation-timing-function CLICK

キーフレームの始まりから終わりまでの間のアニメの仕方を指定

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )

3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

animation-delay CLICK

アニメ開始の待ち時間を指定。1s 等。
初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。

animation-iteration-count CLICK

アニメーションを繰り返す回数。1 や 2 などと数値、又は infinite (無期限に繰り返す)。
アニメ周期の一部を実行する場合、整数以外の値(例：0.5なら半分だけ実行)を指定も可能。

animation-direction CLICK

アニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。

normal…順方向のアニメーションのみ(デフォルト)

alternate…初回 順方向、次に逆方向、以降、順、逆…と実行。(順 逆 順 逆 …)

reverse…逆方向のアニメーションのみ

normal…順方向のアニメーションのみ(デフォルト)

alternate-reverse…初回 逆方向、次に順方向、以降、逆、順…と実行。(逆 順 逆 順 …)

animation-fill-mode CLICK

アニメの実行前や実行後に適用するスタイルを指定。

normal…アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない。

forwards…アニメの最後に適用された状態を維持する。通常は100%やtoのスタイルになる。※animation-directionが alternate、animation-iteration-count が偶数の場合は0%やfromのスタイルとなる。

backwards…0%やfrom キーフレームで定義された値を即座に適用し、animation-delay プロパティで指定した時間の間、その状態を維持する。

both…forwards と backwards の両方の規定に従う。なのでアニメの設定が実行前と実行後の両方に適用される。

animation-play-state CLICK

アニメを一時停止、再開などを指定する設定。この仕様については、マウスホバーでrunningとpausedを切り替えるなどを想定してるのではないかと思う。

ページトップへ