Cubic Bezier ジェネレーター
CSS cubic-bezier() イージング曲線をビジュアル編集。ハンドルをドラッグして調整、リアルタイムでアニメーションをプレビューし、CSS / SCSS / Tailwind コードを出力。ブラウザで動作。
- ブラウザ内で処理
- データはブラウザ外に出ません
- 無料 · 登録不要
WeChat でスキャンしてシェア
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。
カスタム cubic-bezier が必要な場面
linear / ease / ease-in / ease-out / ease-in-out の 5 つで十分なケースも多いですが、次のようなときはカスタム曲線が必要です：
- デザインシステムにモーション言語が定義されている — Material Design 2 の標準曲線
(0.4, 0, 0.2, 1)、Material 3 の(0.2, 0, 0, 1)、Tailwind のease-in-out。 - overshoot や anticipation が欲しい — モーダルのポップイン、ドロワーのドラッグ、ボタン押下時のフィードバック。
- Figma や After Effects のタイミング曲線を本番ビルドと完全一致させたい。
曲線の読み方
X 軸は正規化された時間（開始 0、終了 1）。Y 軸はアニメーションの進捗。対角線そのままなら linear。対角線より下にたわむ曲線はゆっくり始まり終盤で追いつきます（ease-in 寄り）。上に膨らむ曲線は出だしが速く、だんだん遅くなります（ease-out 寄り）。下から上へ S 字を描けば ease-in-out です。0 を下回ったり 1 を超えたりすると「バネ」効果が生まれ、装飾的な UI には合いますが機能フローには邪魔になることもあります。
イージング使い分け早見表
| 用途 | 推奨カーブ | 理由 |
|---|---|---|
| ページ・セクション入場 | cubic-bezier(0, 0, 0.2, 1)（decelerate） | 立ち上がり速く、終わりは柔らかく着地。最終状態を視認しやすい。 |
| ページ・セクション退場 | cubic-bezier(0.4, 0, 1, 1)（accelerate） | ゆっくり始まり素早く抜ける。次の画面がキビキビ感じる。 |
| 汎用トランジション | cubic-bezier(0.4, 0, 0.2, 1)（Material 2 標準） | すばやく加速し、ゆっくり減速。hover、focus、小さな移動に向きます。 |
| 遊び心のあるポップ | cubic-bezier(0.68, -0.55, 0.265, 1.55)（back ease） | anticipation と overshoot を両立。バッジやトースト、注目喚起向き。 |
| ドラッグ追従 | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 滑らかな減速で物理的な慣性を再現。 |
プリセットの出典
各プリセットボタンは下表の 4 つの数値を読み込みます。同じ名前でも曲線が違うことがあるため、ラベルには体系とバージョンを書いています。Material 3 は Material 2 の標準曲線を置き換え、Apple の「既定」も 1 つではありません。
| プリセット | 値 | 出典 |
|---|---|---|
| Ease・Ease-In・Ease-Out・Ease-In-Out | (0.25, 0.1, 0.25, 1)、(0.42, 0, 1, 1)、(0, 0, 0.58, 1)、(0.42, 0, 0.58, 1) | CSS のキーワード、CSS Easing Functions Level 1 §2.2 |
| Material 2 標準 / 減速 / 加速 | (0.4, 0, 0.2, 1)、(0, 0, 0.2, 1)、(0.4, 0, 1, 1) | Material Design 2, Speed |
| Material 3 標準 | (0.2, 0, 0, 1) | Material 3 easing tokens（md.sys.motion.easing.standard） |
| Core Animation 既定 | (0.25, 0.1, 0.25, 1) | CAMediaTimingFunctionName.default。CSS の ease と同じ曲線です。UIKit のビューアニメーションの既定は ease-in-ease-out です。 |
| Tailwind In-Out | (0.4, 0, 0.2, 1) | Tailwind CSS transition-timing-function（ease-in-out） |
| Back（オーバーシュート） | (0.68, -0.55, 0.265, 1.55) | よく使われるオーバーシュート曲線。y が 0 未満と 1 超になるため、いったん戻ってから終点を行き過ぎます。 |
時間は逆行しないので、2 つの制御点の x は 0〜1 の範囲に収める必要があり、エディターが自動で制限します。y はこの範囲を超えてもよく、Back プリセットのオーバーシュートはそれで生まれます。
プライバシー
エディタはブラウザ内で動作します。曲線評価、アニメーションプレビュー、コピー操作はすべて端末上で実行され、制御点の値・時間・生成された CSS はサーバーへ送信されません。
関連ツール
- CSS Clip Path ジェネレーター — ハンドルをドラッグして編集できる clip-path エディタ。
- グラスモーフィズム ジェネレーター — リアルタイムプレビュー付きのフロストガラス UI ジェネレーター。
- CSS フィルター ジェネレーター — blur や brightness などをスライダーで調整。
FAQ
cubic-bezier イージング関数とは？
CSS の cubic-bezier(x1, y1, x2, y2) は、経過時間 (0〜1) をアニメーション進捗 (0〜1) にマッピングする曲線を 4 つの数値で定義します。曲線の両端は (0, 0) と (1, 1) に固定され、調整できるのは中間の 2 つの制御点 P1 と P2 のみ。P1.x と P2.x は必ず [0, 1] の範囲内、P1.y と P2.y は 0-1 を超えても構いません（overshoot や anticipation の表現）。
ease / ease-in / ease-out キーワードと何が違う？
CSS のキーワードは cubic-bezier プリセットの別名です。ease は cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in-out は cubic-bezier(0.42, 0, 0.58, 1)。形状は 4 種類だけ。カスタム曲線にすれば、デザインシステムの標準（Material / iOS / Tailwind）に合わせる、特定のトランジションだけ手触りを微調整する、CSS / SCSS / Tailwind 設定で同じ数値を再利用する、といったことが可能になります。
なぜ P1.y / P2.y は 0-1 を超えてよい？
Y がマイナスだと anticipation（先に逆方向へ引いてから動き出す）、1 を超えると overshoot（行き過ぎてから戻る）になります。代表例の cubic-bezier(0.68, -0.55, 0.265, 1.55) は両方を使った back-out 曲線です。X 軸は時間なので、CSS の有効なタイミング関数として動かすには [0, 1] の範囲を保つ必要があります。
Tailwind CSS でどう使う？
tailwind.config.js の theme.extend.transitionTimingFunction にエントリを追加します。例：smooth-out: 'cubic-bezier(0.4, 0, 0.2, 1)'。これで ease-smooth-out というユーティリティクラスが使えるようになります。本ツールの Tailwind 出力モードはこのスニペットをそのまま生成してくれます。
設定は保存される？
制御点の位置、プレビュー時間、出力フォーマットは ZeroTool 共通の永続化レイヤーで端末の localStorage に保存されます。サーバー送信は一切ありません。ページ上の Clear ボタンで ease-in-out のデフォルトに戻せます。