CSSイージング / cubic-bezierジェネレーター

cubic-bezier(x1, y1, x2, y2)はCSSのトランジションとアニメーションのタイミング関数として使用される3次ベジェ曲線を定義します。曲線は4つの点で定義されます：P0=(0,0)スタート、P1=(x1,y1)コントロールポイント1、P2=(x2,y2)コントロールポイント2、P3=(1,1)エンド。x1、x2は[0,1]内（時間軸）でなければなりません。y1、y2はオーバーシュート効果のために[0,1]の外になることができます。CSSキーワードは特定の曲線にマップされます：ease = (0.25, 0.1, 0.25, 1.0)、ease-in = (0.42, 0, 1.0, 1.0)、ease-out = (0, 0, 0.58, 1.0)、ease-in-out = (0.42, 0, 0.58, 1.0)、linear = (0, 0, 1, 1)。

ease-in：ゆっくり始まり、速く終わる — 静止から始まるオブジェクトのように（重力）。ease-out：速く始まり、ゆっくり終わる — ボールが地面に着地するように。ease-in-out：ゆっくり始まり、速い中間、ゆっくり終わる — 対称的なS字カーブ。linear：全体を通じて一定速度。ease：CSSのデフォルト — わずかにease-inしてからease-out。経験則：画面に入ってくる要素にはease-outを使用します（自然に感じる）。離れていく要素にはease-inを使用します（画面外に加速）。状態遷移にはease-in-outを使用します。UIにlinearを使用しないでください — 機械的でロボット的に感じます。

Cubic-bezier：固定時間、物理に依存しないタイミング。アニメーションは常に指定された時間で完了します。Spring：質量、剛性、減衰、速度を持つ物理ベース。時間は固定されておらず — システムが安定するまで実行されます。スプリングはオーバーシュートして自然に振動できます。CSSはネイティブでスプリングをサポートしていません — JavaScriptが必要です（Framer Motion、React Spring、GSAP）。純粋なCSSには、[0,1]外のy値を持つcubic-bezierがスプリングオーバーシュートを近似します。例：cubic-bezier(0.34, 1.56, 0.64, 1)は穏やかなスプリング的オーバーシュートを作成します。

原則：現実世界のオブジェクトは瞬時に始まったり止まったりしません。マテリアルインタラクションに従います：画面に入ってくる要素はease-out（到着時に減速）にします。離れていく要素はease-in（出発時に加速）にします。状態変化（展開、折りたたみ）にはease-in-outを使用します。マイクロインタラクション（ボタン押下）はレスポンスにease-out、リセットにease-inを使用します。Material Designでは：標準カーブ(0.4, 0, 0.2, 1)、減速(0, 0, 0.2, 1)、加速(0.4, 0, 1, 1)を使用します。iOSはわずかなオーバーシュートを持つスプリングアニメーションを使用します。

CSS linear()（2023）は複雑な曲線を近似する区分線形関数である多段階線形補間を可能にします。構文：animation-timing-function: linear(0, 0.25, 1); バウンスイージング：linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1)。これはJavaScriptなしでスプリング、バウンス、複雑な物理アニメーションを実現する方法です。Web Animations APIのJavaScriptのgenerateLinearEasing()関数は任意の物理シミュレーションからこれらの値を計算できます。ブラウザサポート：Chrome 113+、Firefox 112+、Safari 17.2+。