イージング関数：ease、linear、cubic-bezier

イージング関数は、トランジションやアニメーションの速度曲線、つまり継続時間中にどのように加速・減速するかを制御します。

linearは、トランジション全体を通して一定の速度を維持します。一定の動きが求められるローディングバーや進捗インジケーターに適しています。

easeは速く始まり、終わりに近づくと減速します。デフォルト値であり、ほとんどのUIトランジションで自然な動きになります。

ease-inはゆっくり始まり、加速します。画面から退出する要素（終了アニメーション）に適しています。

ease-outは速く始まり、減速します。画面に入ってくる要素に適しており、勢いよく現れて滑らかに落ち着きます。

ease-in-outは始めと終わりがゆっくりで、中央部分では動きが速くなります。ループするアニメーションや往復するアニメーションに最適です。

4つの制御点を持つカスタムの3次ベジェ曲線を定義します。ばねのようなイージングや、独自のイージング曲線を実現できます。

4つの値は2つの制御点を定義します：cubic-bezier(x1, y1, x2, y2)。y軸の値が1を超えると、オーバーシュート（ばね）効果が発生します。曲線を視覚化するには、easings.netなどのツールを使用してください。

steps(n, direction)は、アニメーションをn個の均等な離散ステップに分割します。スプライトアニメーションやタイプライター効果に最適です。

2番目の引数は、ステップが発生する位置を制御します。

• jump-start：時刻0で最初のステップ
• jump-end：終了時刻で最後のステップ（デフォルト）
• jump-both：開始時と終了時の両方でステップ
• jump-none：どちらの端でもステップなし

新しいlinear()関数を使うと、複数の点を通る任意のイージング曲線を定義できます。cubic-bezierの制限を受けず、純粋なCSSでばねやバウンスの効果を実現できます。

トランジション全体を通して一定の速度を維持するイージング関数はどれですか？

イージング関数は、アニメーションの速度曲線を制御します。組み込みの選択肢にはlinear、ease、ease-in、ease-out、ease-in-outがあります。カスタム曲線にはcubic-bezier()を使用します。離散的なステップにはsteps()を使用します。新しいlinear()関数を使うと、複雑でばねのような曲線を実現できます。