CSSのアニメーション等で指定するease-in-outやlinearなどがありますよね。
これらは「イージング関数」と呼ばれるものなのですが、
どのような違いがあるかハッキリ分からずにそのまま使っていませんか？
とりあえずease-in-outだけ使ってました
違いが分かれば細かな使い分けや、シーンに適切な表現方法が分かります。
今回はサンプルも使いながら、視覚的にもわかりやすく解説していきます。
サンプルで一覧を見よう
文字で読むより見るのが早いです。
解説は後ほどしますので実際のコードをご覧ください。
See the Pen Untitled by WEB-DEN (@Yukiwebcreate) on CodePen.
全部並べてみると細かな違いがわかりやすいですね。
以下文章で違いを解説していきます。
linear
linearは日本語では「リニア」と読みます。（ライナーじゃないよ）
リニアモーターカーのように一定の速度でスイーと移動するのがlinearです。
ease
easeは最初と最後がゆっくりに変化するデフォルトのイージング関数です。
steps()
stepsはアニメーションを任意のステップに分割して、段階的にアニメーションを進めます。
アニメーションが進む際はスムーズな移動ではなく、瞬間的に次の位置にジャンプします。
10ステップに分割したい場合はsteps(10)とします。5ステップならsteps(5)ですね。
ease-in
ease-inは、初めは遅く、終わりに向かって速くなる動きです。途中からどんどんと加速していく感じです。
ease-in-out
ease-in-outは初めは遅く、中盤は速く、終わりに向かってまた遅くなる動きです。
easeと似ていますが、easeよりも中間点が意識された挙動になってるかなと思います。
ease-out
ease-outは初めは速く、終わりに向かって徐々に遅くなる動きです。
ease-inの逆です。
おまけ：イージングってどういう意味？
英語のeasing（イージング）は「緩和」という意味があります。
アニメーションを緩やかにする、みたいなところからイージング関数と言われてるのかも知れませんね。
というわけで、今回はイージング関数の違いを解説しました。
参考になれば幸いです。
