Cubic Bezier のアニメーション曲線を理解するには？
Cubic Bezier は開始点、2 つの制御点、終了点を使ってアニメーションの進み方を表します。CSS では開始点が (0,0)、終了点が (1,1) に固定されるため、調整するのは P1 と P2 です。x 軸は経過時間、y 軸はプロパティの進捗率を表し、曲線が急な区間ほどその段階の変化が速くなります。
時間を逆行させることはできないため、x1 と x2 は 0〜1 の範囲にする必要があります。一方 y 値は範囲外でもよく、要素を一時的に終点より先へ進ませたり、最初に逆方向へ動かしたりできます。表現力のある効果ですが、正確な予測可能性が求められるフォーム操作やナビゲーションでは避けるのが無難です。
イージング選択の原則
- Ease-out は element が scene へ入るときによく使われ、素早く反応した後に柔らかく停止します。
- 要素を退場させる際は ease-in を使い、最初はゆっくり、後半は速く動かせます。
- continuous rotation や progress indicator には linear が適しています。
- interface state transition には ease-in-out を使うと、開始と終了がより自然になります。
よくある質問
4 つの数字は何を表していますか？
順序は x1, y1, x2, y2 で、2 つの control point の座標を表します。
なぜ can't control point x go beyond 0 to 1 のですか？
x は time を表します。1 つの time に 1 つの進行度だけが対応するよう、CSS では x1 と x2 の範囲が制限されています。
y value が範囲外の場合はどうなりますか？
animated property が end point を超えたり start point を下回ったりし、overshoot や anticipation を作れます。
ease と ease-in-out の違いは何ですか？
default ease は比較的勢いよく開始し、ease-in-out は開始と終了がゆっくりで中間が速くなります。
すべての CSS プロパティに easing を適用できますか？
滑らかに interpolation できるのは animatable property だけです。display など discrete property は、通常同じような transition effect を持ちません。