〽️サンプルを準備。 〽️① ease、始めと終わりが滑らか。 〽️② linear、終始一定。 〽️もっと極端な③④⑤。 〽️ちょっと実戦。 〽️まだまだあるでよ。
⬆︎CSSアニメーションについてのまとめページはこちら。
こんにちは、「ふ」です。
CSSアニメーション基礎の5回目。
唐突ですが、これまでの記事のサンプルを見ていて、お気づきの方もいらっしゃるかと思います。
そう、アニメーションの進行が一定では無いんです。
サンプル⬆︎は要素が4秒間で左から右へと移動するCSSアニメーションです。下の数字カウンター(一定)に対してアニメーションの進捗がまったく合っていません。
animation-timing-functionは、アニメーションの進行具合を調節するプロパティです。その初期値は「ease(緩やかに始まり、緩やかに終わる)」となっているため、プロパティ指定なしでアニメーションを実行すると進行が一定にならないんです。
そこで今回からは、CSSアニメーションのanimation-timing-functionについて詳しく紹介していきたいと思います。
timimg-functionは指定する値が多岐にわたっており、初回は定番の値5つ。
① ease(初期値)
② linear
③ ease-in
④ ease-out
⑤ ease-in-out
これらについて見ていきましょう。
前回の記事⬆︎はこちら。合わせてお読みください。
animation-timing-functionの定番な指定値5つの記述と、その実行サンプルを見比べてみましょう。
その前にサンプルを準備。
要素の幅が徐々に広がっていくCSSアニメーションで試してみます。
ベースとなるコードはこちら⬇︎。
■ HTML
■ CSS
青で示した部分、ここの値を書き換えて実行していきます。
皆さんも、CSSアニメーションのサンプルを実際に作成して、試してみてください。
timing-functionの初期値です。何も指定しなければこのeaseが適用されます。
アニメーションは滑らかに始まり、終わりも滑らか。
ちょっと「余韻感」がありますね。
時間とアニメーションの進捗(進み具合)の関係は、この⬆︎ようになっています。
開始はややふわっと。そのあとは少し急な進行。最後はゆるやかに終わっています。
ショートハンドで書くとこの⬆︎ように。先程のサンプルと同じ結果が得られます。
linear(直線)を指定すると、アニメーションの進捗は終始一定と成増。
下の数字カウンターとアニメーションが完全に一致しています。
正確な進行でスッキリですが、反面「無機質」な印象も有りますね。
時間と進捗の関係はこのように。完全な直線です。
この「linear」と初期値の「ease」が最も使用頻度が高いと言えましょう。
物理感ならease、正確性ならlinear。先づは覚えておきたい2つです。
easeとlinearの他に、定番の値があと3つあります。
「始め」と「終わり」、またはその両方を極端に遅らせる値です。
ease-inは、アニメーション開始時の進捗を少なくします。
easeの時に感じる「滑らかな始まり」というよりは、リアルに「遅い!」という印象ですね(笑)
時間と進捗の関係はこのように。
グラフ上はそんなに激しい曲線には見えないのですが、実際のアニメーションは結構、極端な変化を見せます。
ease-outはease-inと正反対で、終わりに向かうにつれ進捗が少なくなっていきます。
本来の進捗状態である開始時が、逆にせわしなく感じますね。
グラフもease-inを反転させた曲線です。
ease-in-outは、始めと終わり両方の進捗を少なくします。
振り子運動のようなものに使えるかも。
グラフはこの⬆︎ように。
ease-in、ease-out、ease-in-out。これら3つの値はCSSアニメーションにかなり極端な変化をもたらします。
特殊な効果を実装する場合には覚えておきたいですね。
ではこれらの値を、どのように使い分けていけばいいのか。
一緒に考察してみましょう。
冒頭で使った、球体が横移動していくCSSアニメーション。
「linear」で実行してみました。
アニメーションの進行が正確すぎて、なんだか無機質ですね・・
「ease」にすると、少し「ボール感」が出ました。
物理運動系に「linear」は不向きかも。
テキストのopacityを0→1にするCSSアニメーション。
初期値の「ease」で試しましたが、もう少し「じわじわと浮き上がってくる感」が欲しい。
思い切って「ease-in」に。
何も無いところからテキストが浮かんでくる感じが得られました。
タイマーなど、正確性が求められるCSSアニメーションであれば「linear」一択ですね。
もちろんですが、これらは「ふ」の主観をもとにお話ししたにすぎません。ケースによって適正なtiming-functionは違ってくると思います。
皆さん好みのanimation-timing-functionを探してみてください。
① ease(初期値)
② linear
③ ease-in
④ ease-out
⑤ ease-in-out
最後までお読みいただき、ありがとうございました。
今回はCSSアニメーションのanimation-timing-function、定番の値5つについて紹介してきました。これだけでもアニメーションに豊富な色付けができそうですね。
しかししかし。animation-timing-functionには他にもトリッキーな値が存在します。次回以降お伝えする予定なので、お楽しみに。ではまた〜 ♩
CSSアニメーション、発火のタイミングを制御する。
〽️ 好きなタイミングで発火/消火。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。