cubic-bezier()の値を手で覚える必要がありますか？

いいえ。CSS標準キーワード（ease, ease-in等）で十分な場合はそれを使い、カスタムカーブが必要な場合のみ本ツールで視覚的に調整してコピーすれば問題ありません。

y値が0未満や1超でも問題ないですか？

CSSの仕様上、y値には制限がありません。y 1で行き先をオーバーシュートする効果が得られます。モダンブラウザすべてで正しく動作します。

transition と animation どちらで使えますか？

どちらでも使えます。transition-timing-function と animation-timing-function の両方で cubic-bezier() を指定できます。

ブラウザ対応状況は？

cubic-bezier()はCSS Transitions Level 1仕様で定義されており、2026年現在のすべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）で完全にサポートされています。IE10以降でもサポートされていました。

デザイン・Web制作

cubic-bezier エディタ (CSS イージング)

CSS cubic-bezier()イージング関数をドラッグ操作でビジュアル編集。29種のプリセット（ease, easeInOut, easeOutBack等）、アニメーションプレビュー、CSSコードコピー対応。

プリセット

CSS 出力

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

アニメーションプレビュー

CSS transition で実際に動くボックス (クリックで往復)

使用例

.element {
  transition: all 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* または @keyframes で */
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}
.element {
  animation: slide 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

このツールについて問い合わせる →

cubic-bezier エディタ (CSS イージング)について

CSS cubic-bezier()とは

cubic-bezier()は、CSSのtransition-timing-functionやanimation-timing-functionで使用されるイージング関数です。アニメーションの加速・減速のカーブを4つの数値（2つの制御点のx, y座標）で定義します。

W3CのCSS Transitions仕様（CSS Transitions Level 1）で定義されており、ease、ease-in、ease-out、ease-in-out、linearといったキーワードはすべてcubic-bezier()の特定の値に対応しています。

制御点の意味

cubic-bezier()は4つの引数 cubic-bezier(x1, y1, x2, y2) を取ります。これらは3次ベジェ曲線の2つの制御点を表します。

パラメータ	範囲	説明
x1	0〜1	第1制御点の時間軸位置
y1	任意（負値で跳ね返り）	第1制御点の進行度
x2	0〜1	第2制御点の時間軸位置
y2	任意（>1でオーバーシュート）	第2制御点の進行度

x値は時間軸（0=開始, 1=終了）のため0〜1に制限されますが、y値は制限がなく、負の値にすると一時的に戻る「跳ね返り」効果、1を超えると「行き過ぎ」効果が得られます。

CSSキーワードとの対応

キーワード	cubic-bezier()値	特徴
`linear`	`cubic-bezier(0, 0, 1, 1)`	等速
`ease`	`cubic-bezier(0.25, 0.1, 0.25, 1)`	ゆっくり→速く→ゆっくり（デフォルト）
`ease-in`	`cubic-bezier(0.42, 0, 1, 1)`	ゆっくり開始
`ease-out`	`cubic-bezier(0, 0, 0.58, 1)`	ゆっくり終了
`ease-in-out`	`cubic-bezier(0.42, 0, 0.58, 1)`	両端がゆっくり

イージングの選び方

UIの表示・登場: ease-out系。すばやく現れてゆっくり定位置に収まる自然な動き
UIの退場・非表示: ease-in系。ゆっくり動き出して加速して消える
状態変化: ease-in-out系。色の変化やサイズ変更など、始終がなめらか
データの進捗: linear。プログレスバーなど等速が期待される場面
バウンス効果: easeOutBack (y2 > 1) で行き過ぎてから戻る動き

よくある質問

Q. cubic-bezier()の値を手で覚える必要がありますか？: いいえ。CSS標準キーワード（ease, ease-in等）で十分な場合はそれを使い、カスタムカーブが必要な場合のみ本ツールで視覚的に調整してコピーすれば問題ありません。
Q. y値が0未満や1超でも問題ないですか？: CSSの仕様上、y値には制限がありません。y < 0で一時的に元の位置より戻り（バウンス）、y > 1で行き先をオーバーシュートする効果が得られます。モダンブラウザすべてで正しく動作します。
Q. transition と animation どちらで使えますか？: どちらでも使えます。transition-timing-function と animation-timing-function の両方で cubic-bezier() を指定できます。
Q. ブラウザ対応状況は？: cubic-bezier()はCSS Transitions Level 1仕様で定義されており、2026年現在のすべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）で完全にサポートされています。IE10以降でもサポートされていました。