CSSイージング関数エディタ

CSSイージング関数エディタは、CSSトランジションやアニメーションで使用される cubic-bezier()イージングカーブを設計するための無料のブラウザベースビジュアルツールです。 コントロールポイントの値を推測する代わりに、インタラクティブなグラフ上の2つのハンドルを ドラッグしてカーブを正確に形作り、結果のモーションをリアルタイムで確認できます。

CSSトランジションとアニメーションは、プロパティの中間値が時間とともにどのように 変化するかを制御するtiming-functionを受け付けます。cubic-bezier(x1, y1, x2, y2) 関数は、アニメーションの開始を表す(0, 0)と終了を表す(1, 1)の2つの固定端点間の カーブを定義します。2つのコントロールポイント(x1, y1)と(x2, y2)がカーブの形状を 決定し、したがってアニメーションの「感触」を決めます。ゆっくり始まって加速するか、 ターゲットを超えてバウンスバックするか、一定速度で遷移するかなどです。

このエディタには、カテゴリ別にグループ化された20以上のビルトインプリセットが 含まれています。ease、ease-in、ease-in-outなどの標準CSSキーワード、 2次、3次、4次、指数関数のイージングファミリー、オーバーシュートカーブ（Back）、 Material Designモーションカーブなどがあります。

比較モードでは、同じグラフ上に2番目のイージングカーブ（赤で表示）を 重ねて表示でき、2つの異なるタイミング関数の動作を視覚的に比較できます。

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。 CSSアニメーションジェネレーターと組み合わせて 完全なキーフレームアニメーションを構築したり、 カラーコンバーターでアニメーション要素の色を微調整したり、 CSSレイアウトジェネレーターでアニメーション対象の 要素を構造化したりできます。

1. グラフ上のコントロールポイントをドラッグします — 青いポイントがP1 (x1, y1)、緑のポイントがP2 (x2, y2)です。カーブはリアルタイムで更新されます。
2. または、グラフ下のx1, y1, x2, y2入力フィールドに正確な値を入力します。
3. 右側のプリセットパネルを参照し、任意のプリセットをクリックして値を即座に読み込みます。
4. Durationスライダーを調整して、アニメーション時間を100msから3000msの間で設定します。
5. Playをクリックして、プレビュー領域で移動するボックスにイージングが適用されるのを確認します。もう一度クリックで停止。
6. Compareモードを有効にして、2番目のイージングカーブ（赤）を重ねて表示し、両方を並べてアニメーションさせます。
7. 出力行の横にあるCopyボタンをクリックするか、Ctrl+Shift+Cを押してcubic-bezier()値をクリップボードにコピーします。