cubic-bezierジェネレーター

cubic-bezierジェネレーターの使い方

1. プリセットを選択する

まずは、作りたい動きに近いプリセットを選択します。

CSS標準のEase・Ease In・Ease Out・Ease In Outなどに加え、Expo系やBack系の特徴的な動きも用意しています。

プリセットを選択すると、カーブ・制御点・アニメーションプレビューにすぐ反映されます。

2. 制御点を調整する

カーブエディター上の2つの制御点をドラッグして、イージング曲線を調整します。

X1・Y1・X2・Y2の値を直接入力して、細かく調整することもできます。

グラフの横軸は時間の進行、縦軸はアニメーションの進行度を表しています。

3. アニメーションで動きを確認する

「再生」ボタンを押すと、現在の設定を実際のアニメーションで確認できます。

「比較するイージング」を選択すると、現在の設定とLinear・Easeなどの動きを同時に再生して、違いを比較できます。

再生時間は100〜5000msの範囲で変更でき、速いアニメーションとゆっくりしたアニメーションの両方で動きを確認できます。

4. 生成された値をコピーする

調整した内容からcubic-bezier()の値が自動生成されます。

「Value」「Transition」「Animation」のタブから用途に合う形式を選び、「コピーする」ボタンでコードをコピーして、ご自身のプロジェクトに適用してください。

設定を最初の状態に戻す場合は、「リセット」ボタンを使用します。

cubic-bezierとは？

cubic-bezier()は、CSSのアニメーションやトランジションにおける速度変化を細かく指定できるイージング関数です。

一定速度で動かすだけでなく、「ゆっくり動き始めて徐々に加速する」「勢いよく動き始めて最後にゆっくり止まる」といった動きを作ることができます。

cubic-bezier()は、以下の4つの値で指定します。

cubic-bezier(x1, y1, x2, y2)

たとえばCSS標準のeaseは、次の値で表されます。

cubic-bezier(0.25, 0.1, 0.25, 1)

曲線には、開始点P0・制御点P1・制御点P2・終了点P3の4つのポイントがあります。

開始点P0は(0, 0)、終了点P3は(1, 1)に固定されているため、実際に調整するのはP1とP2の座標です。

• P1 = (x1, y1)
• P2 = (x2, y2)

X軸は時間の進行、Y軸はアニメーションの進行度を表します。

X1・X2は0〜1の範囲で指定する必要がありますが、Y1・Y2には負の値や1を超える値も指定できます。

Y値を0〜1の範囲外にすると、開始位置とは逆方向へ動いたり、終了位置を一時的に行き過ぎて戻ったりする動きを作れます。

FAQ

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);