タスクの道筋 / 入力から結果へ
cubic-bezier イージングカーブをデザインする方法
- 01
1 つ目の制御点を置く
「制御点 X1」を 0〜1、「制御点 Y1」を −1〜2 の範囲で設定します。カーブチャートはリアルタイムに再描画され、始点からハンドルへのガイドラインが表示されます。
- 02
2 つ目の制御点を置く
「制御点 X2」（0〜1）と「制御点 Y2」（−1〜2）を設定します。Y 値を 1 より先に引っ張ることが、イージングに弾みを付けるオーバーシュートを生み出します。Y1 を 0 より下に引くと、動きが始まる前に一瞬の予備動作が加わります。
- 03
時間を設定する
「時間」を 0.1〜4 秒の間で選びます。モーショントラック上のマーカーが、あなたのカーブそのままにループします。見ているテンポが、そのまま本番のテンポです。
- 04
既知のカーブから始めることもできる
デフォルトのカーブ（0.25, 0.1, 0.25, 1）は、標準の ease キーワードとまったく同じで、中立な出発点です。「サンプルを読み込む」を押すと、弾むようなオーバーシュートカーブ（0.34, 1.56, 0.64, 1）が適用され、Y 値が 1 を超えると何が起きるかを示します。
- 05
タイミング CSS をコピーする
「CSS をコピー」または「.css をダウンロード」で toolars-cubic-bezier.css を保存します。.motion ルールは transition-duration と二つの timing-function を設定します。animation-duration は設定しないため、キーフレームアニメーションでは別途指定してください。
- 06
出荷前にチャートを読む
チャートは固定された始点と終点の間で時間に対する進行を描きます。平らな区間は遅く、急な区間は速い。始点より下に落ちたり終点を超えて上がったりするカーブはエラーではありません。予備動作とオーバーシュートが、正直に描かれているのです。