CSSアニメーション05、
animation-timing-function。

〽️サンプルを準備。 〽️① ease、始めと終わりが滑らか。 〽️② linear、終始一定。 〽️もっと極端な③④⑤。 〽️ちょっと実戦。 〽️まだまだあるでよ。





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

こんにちは、「ふ」です。
CSSアニメーション基礎の5回目。

唐突ですが、これまでの記事のサンプルを見ていて、お気づきの方もいらっしゃるかと思います。

そう、アニメーションの進行が一定では無いんです。
サンプル⬆︎は要素が4秒間で左から右へと移動するCSSアニメーションです。下の数字カウンター(一定)に対してアニメーションの進捗がまったく合っていません。



animation-timing-function。


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

<div id = "sample"></div>

■ CSS

#sample { width:100%; height:2em; background-color:#00aeef; animation:sample 4s infinite; 「「1animation-timing-function:〇〇;」」 } @keyframes sample { from { width:0%; } }

青で示した部分、ここの値を書き換えて実行していきます。
皆さんも、CSSアニメーションのサンプルを実際に作成して、試してみてください。

① ease、始めと終わりが滑らか。


#sample { 「「3〜規定スタイルは略。〜」」 animation:sample 4s infinite; 「「1animation-timing-function:ease;」」 }

timing-functionの初期値です。何も指定しなければこのeaseが適用されます。
アニメーションは滑らかに始まり、終わりも滑らか。
ちょっと「余韻感」がありますね。

時間とアニメーションの進捗(進み具合)の関係は、この⬆︎ようになっています。
開始はややふわっと。そのあとは少し急な進行。最後はゆるやかに終わっています。

#sample { animation:sample 4s 「「1ease」」 infinite; }

ショートハンドで書くとこの⬆︎ように。先程のサンプルと同じ結果が得られます。

② linear、終始一定。


#sample { 「「3〜規定スタイルは略。〜」」 animation:sample 4s infinite; 「「1animation-timing-function:linear;」」 }

linear(直線)を指定すると、アニメーションの進捗は終始一定と成増。
下の数字カウンターとアニメーションが完全に一致しています。
正確な進行でスッキリですが、反面「無機質」な印象も有りますね。

時間と進捗の関係はこのように。完全な直線です。

この「linear」と初期値の「ease」が最も使用頻度が高いと言えましょう。
物理感ならease、正確性ならlinear。先づは覚えておきたい2つです。

ちょっと極端な③④⑤。


easeとlinearの他に、定番の値があと3つあります。
「始め」と「終わり」、またはその両方を極端に遅らせる値です。

 ③ ease-in、
 始めをゆっくり。


#sample { 「「3〜略。〜」」 「「1animation-timing-function:ease-in;」」 }

ease-inは、アニメーション開始時の進捗を少なくします。
easeの時に感じる「滑らかな始まり」というよりは、リアルに「遅い!」という印象ですね(笑)

時間と進捗の関係はこのように。
グラフ上はそんなに激しい曲線には見えないのですが、実際のアニメーションは結構、極端な変化を見せます。

 ④ ease-out、
 終わりをゆっくり。


#sample { 「「3〜略。〜」」 「「1animation-timing-function:ease-out;」」 }

ease-outはease-inと正反対で、終わりに向かうにつれ進捗が少なくなっていきます。
本来の進捗状態である開始時が、逆にせわしなく感じますね。

グラフもease-inを反転させた曲線です。

 ⑤ ease-in-out、
 両方ゆっくり。


#sample { 「「3〜略。〜」」 「「1animation-timing-function:ease-in-out;」」 }

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、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。