animation-fill-modeでアニメーションを使いこなす【CSS】

CSS
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: both
animation: アニメーション名 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でした。

スポンサーリンク
サボり気味です、でもたまにつぶやきます。
NO IMAGE

晴耕雨読

『晴れた日には畑を耕し雨の日には本を読む』そんな生活を目指すブログです