01
用途に近い形から始める
登場する要素ならease-out、標準的な状態変化ならeaseやMaterial標準を試します。プリセット選択で4値がまとめて変わり、その後に編集するとカスタム表示になります。
HTML・CSS・フロントエンド
cubic-bezierジェネレーター動きを見てからCSSへ
制御点をドラッグするか4つの値を入力し、動きを確かめてからコピーします。
cubic-bezierジェネレーター
曲線の入力
制御点をドラッグするか矢印キーで微調整します。Shiftキーを押すと大きく動きます。
CSSの結果
cubic-bezier(0.25, 0.1, 0.25, 1)動きのプレビュー
入力した曲線はこのブラウザ内で処理され、送信されません。
設定
破線は一定速度の進み方です。
曲線を更新しました。
画面遷移が重く感じるときは、時間の長さだけでなく動き始めと止まり方を見直します。cubic-bezierジェネレーターなら、まずease-outなどを選び、2つの制御点で速度感を調整できます。
既存のcubic-bezier() も取り込めます。CSSイージング曲線を直線と重ね、アニメーションプレビューを1回ずつ再生すると、数値だけでは分かりにくい行き過ぎや戻りが見えます。
cubic-bezierジェネレーターを使う理由
制御点と数値を同時に見ながら、ブラウザで動きを確かめられます。
ドラッグと数値が同じ曲線を表す
2つの制御点とX1・Y1・X2・Y2の入力欄は常に対応します。cubic-bezierジェネレーターに既存の関数を貼り付けても、手入力した桁数を勝手に小数2桁へ丸めません。
Xの誤りとYの行き過ぎを区別
CSSではXだけが0から1に制限されます。cubic-bezierジェネレーターはドラッグ中のXを端で止め、範囲外の手入力は元の文字列を残してエラーを示します。Yが1を超える曲線は有効です。
プリセットを選んだ後に確認する3点
02
始点側と終点側を別々に動かす
最初の制御点は動き始め、2番目は止まり方に強く影響します。Xのドラッグは端で止まり、Yは0から1の外にも動かせるため、逆方向への予備動作や行き過ぎを試せます。
03
実際の長さで1回ずつ再生する
既定の1000msから用途に合わせて変え、再生ボタンで見比べます。プレビュー時間はコピーする4値に混ざりません。自動更新を切った場合はCtrl/Cmd+Enterでも更新できます。
編集・比較・コピーを一つの曲線で
4つの入力方法が連動
ドラッグ、矢印キー、数値欄、関数の読み込みが同じ制御点を更新します。イージングエディタで線形の参照線を重ねると、一定速度との差が見えます。
ブラウザの計時関数で試写
CSSアニメーションのプレビューには生成したcubic-bezier()をそのまま使います。曲線の内部パラメータを経過時間と取り違えず、必要なときだけ再生します。
用途に合わせた2つのコピー
関数だけならanimationの値に、transition-timing-function宣言ならCSSルールに貼れます。入力が変わった古い結果や無効なX値はコピーできません。
数値の範囲と再現できる動き
- Xだけが0〜1に制限される
- X1とX2をドラッグすると端で止まります。手入力や読み込みで範囲外になった値は丸めずに残し、どの欄が無効か示します。Yは負でも1を超えてもCSS上は有効です。
- 1本の曲線はバネではない
- 1つのcubic-bezier()で表せるのは単一の予備動作や行き過ぎです。何度も跳ね返る動き、物理的なspring、多段の@keyframesは作りません。
- 再生時間は出力に含まれない
- プレビュー時間は正の有限なミリ秒数にしてください。変えても制御点や関数値は変わらず、再生は自動で繰り返されません。
- 扱うのはCSSの計時関数のみ
- スタイルシート全体の解析、ファイルやURLの読み込み、Tailwind・GSAP向けの出力、保存するプリセット集には対応しません。
cubic-bezierジェネレーターのよくある質問
cubic-bezier()の4つの数字は何を表していますか？
X1・Y1・X2・Y2という2つの制御点の座標です。始点(0,0)と終点(1,1)は固定され、Xが時間、Yが進み具合を表します。
UIアニメーションにはどのイージングを選べばいい？
表示や反応にはすぐ動き始めてゆっくり止まるease-outが出発点になります。Material標準も試し、実際に使う長さでプレビューして判断してください。
easeとease-outの違いは？
どちらも最後に減速しますが、easeは始まりも穏やかです。ease-outは出だしが速いので、要素の登場が機敏に感じられます。
CSSで弾むアニメーションを作るには？
2番目の制御点のYを1より上に置くと、終点を一度越えて戻る動きになります。繰り返し跳ねる動きは単一のcubic-bezier()では作れないため、キーフレームなどを使います。
@keyframesアニメーションでもcubic-bezierを使える？
使えます。コピーした関数をanimation-timing-functionまたはanimationの短縮形へ入れます。このページはキーフレームや遅延・繰り返し回数までは生成しません。
解決しませんでしたか？
cubic-bezierジェネレーターで自分の曲線を試す
既存の関数を読み込み、長さを合わせて再生し、有効なCSS値をコピーします。cubic-bezierジェネレーターなら制御点と数字を見比べながら調整できます。