CSSのイージング曲線を調整する

やりたいこと

イージングがUIのキビキビ・のんびり・遊び心を決めます。4つの数字は単体では読めませんが、ライブ曲線と動くマーカーで読めるようになります。

調整する

x1/y1/x2/y2を動かすかプリセット（ease・ease-in・ease-out・ease-in-out・linear）から始めます。曲線はライブで描かれ、プレビューはマーカーを曲線に沿ってループします。コピーでcubic-bezier()を出力。

• xは入力軸で0〜1固定、yは出力で0未満や1超も可 — それがオーバーシュートです。
• CSSのtransitionはイージングを取る全プロパティで同じ値を受けます。

具体例

ease-out (0, 0, 0.58, 1)は速く始まり緩やかに収まります。瞬時に感じるべきメニューやツールチップの標準的な選択です。

対応範囲

cubic-bezierの1区間のみで、スプリング・steps()・多重バウンスはありません。プレビューのマーカーは実際のDOM遷移でなくタイミングを示します。