Cubic Bezierジェネレーター
プレビュー
cubic-bezier(0.25, 0.1, 0.25, 1)transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。画像配色抽出画像をサーバーに送らずブラウザ内だけで主要カラー（HEX/RGB）と占有率（%）を抽出。色数指定・ワンクリックコピー・CSS/JSON書き出し対応。
2つのハンドルをドラッグしてカスタムCSSイージングカーブを設計し、ライブプレビューでモーションを確認してから、そのまま使えるcubic-bezier()値とtransitionコードをコピーできます。アニメーションの質感を微調整するのに最適なツールです。すべてブラウザで動作します。
使い方
- 2つのカラーハンドルをドラッグするか、x1・y1・x2・y2に直接数値を入力します。
- 再生ボタンを押してカーブが生み出すモーションをプレビューします。
- cubic-bezier()の値またはtransitionの完全な行をCSSにコピーします。
仕組み
CSSのイージングカーブは始点(0,0)と終点(1,1)が固定されたキュービックベジェです。2つのコントロールポイントがその間のカーブを形作り、その座標がcubic-bezier(x1, y1, x2, y2)の4つの数値になります。xの値は0〜1の範囲内に収まる必要がありますが（時間は後戻りしないため）、yの値は0〜1を超えてもよく、バウンスや行き過ぎ効果を演出できます。
機能
ドラッグで形を調整
カーブ上のハンドルを直接動かして、思い通りのイージングを感覚的に作れます。
数値の直接入力
仕様やデザインシステムに合わせる必要があるときは、正確な座標を直接入力できます。
ライブプレビュー
使用前にモーションを再生して、イージングの質感を確認できます。
標準プリセット
ease・linear・ease-in・ease-out・ease-in-outから始めてカスタマイズできます。
すぐ使えるコード
cubic-bezier()の値または完全なtransition宣言をコピーできます。
活用シーン
UIモーション
ボタン・モーダル・パネルの動きを調整して、トランジションを自然に感じさせます。
マイクロインタラクション
小さなインタラクションにわずかな行き過ぎや予備動作を加えて個性を出します。
一貫したイージング
カスタムカーブを1つ定義してプロジェクト全体で再利用し、統一感を出します。
学習
コントロールポイントがモーションをどう変えるかを見て、イージング関数を理解します。
注意事項
- xの値は0〜1に制限されます。時間は後戻りできないためです。
- yの値は0〜1を超えることができ、バウンスや行き過ぎ効果を作れます。
- 内蔵プリセットは標準CSSキーワードに相当する近似値です。
- すべてデバイス上で動作します。アップロードはありません。
よくある質問
- cubic-bezierイージングとは何ですか？
- CSSのtransitionやanimationに使うタイミング関数で、2つのコントロールポイントでcubic-bezier(x1, y1, x2, y2)として定義されます。プロパティが時間とともにどのように変化するかを決めます。
- yの値を1より大きく、または0より小さくできますか？
- はい。y値が0〜1の範囲外になるとアニメーションが行き過ぎたり引き戻されたりし、バウンスのような効果が生まれます。xの値だけが0〜1に制限されています。
- easeやease-in-outとどう関係しますか？
- これらのキーワードは特定のcubic-bezierカーブです。プリセットからそれらを選択し、ハンドルをドラッグしてカスタマイズできます。
- 結果をどこに貼り付けますか？
- cubic-bezier()の値をtransitionやanimationのタイミング関数として使います。例：transition: all 0.4s cubic-bezier(...)。
- サーバーに何か送信されますか？
- いいえ。エディターはすべてブラウザ内で動作し、アップロードは行われません。