CSSのanimetionで簡単な動きを付けられるけど終了後の挙動を指定したい。「animation-fill-mode」で出来ることをが知りたい。
そうお困りではありませんか？
javascriputもいいけど、出来るなら動作が軽くて簡単なCSSでアニメーションを付けたい人もいるはず。
CSSのanimetionと@keyframesを使えば自由度の高いアニメーションが作れます。
そして開始と終了時の指定をするなら「animation-fill-mode」がとっても便利、具体例付きで解説していきます。
スポンサーリンク
animation-fill-modeの概要
animation-fill-modeプロパティはanimetionで指定したアニメーションの開始時、終了時の状態を指定することができます。
animation-fill-mode: none
animation-fill-mode: backwards
animation-fill-mode: forwards
animation-fill-mode: bothanimation: アニメーション名 1s linear 2s forwards;
| プロパティ | 説明 |
| none | アニメーションの変化前、変後の指定されない |
| backwards | アニメーション再生後は、キーフレームの0%又はfromが適用される（delayを指定している場合は再生するまで0%又はfromが適用される） |
| forwards | アニメーション再生後は、キーフレームの100%又はtoが適用される（delayを指定している場合は再生するまで元のスタイルが適用される） |
| both | アニメーション再生後は、キーフレームの100%又はtoが適用される（delayを指定している場合は再生するまで0%又はfromが適用される） |
| プロパティ | 開始時 | 終了時 |
| none | 「@keyframes」は効かない | 「@keyframes」は効かない |
| backwards | 「@keyframes」0%又はfromが適用 | 「@keyframes」は効かない |
| forwards | 「@keyframes」は効かない | 「@keyframes」100%又はtoが適用※1 |
| both | 、「@keyframes」0%又はfromが適用 | 「@keyframes」100%又はtoが適用※1 |
| ※1 繰返し2回「animation-iteration-count:2」、終了後逆再生「animation-direction:alternate」が指定されている場合は、アニメーションの終了時は「@keyframes」の0%やfromが適用される | ||
animation-fill-modeで出来ること
各プロパティを比較して見てみましょう。
See the Pen
animation-fill-modeのプロパティ例1 by 太郎 (@taroro55)
on CodePen.
たとえばホームページのTOP画面で、読み込み時にゆっくりフェードインして文字を残したい時
See the Pen
Untitled by 太郎 (@taroro55)
on CodePen.
もちろん「animation」で一括で指定することもできます。
まとめ
delayの指定で違いはあるがアニメーション変化後に開始時に戻すか、
終了時のままにするかが指定ができる！
終了時のままにするかが指定ができる！
ということで解説は以上です。
最後までお読みいただきありがとうございました。Taroでした。
