cubic-bezier() ジェネレーター
2 つの制御点をドラッグして CSS の cubic-bezier() イージングカーブを形作り、動きをプレビューし、タイミング関数をコピー — すべてブラウザ内で。
cubic-bezier() ジェネレーターはすべてブラウザ内で動作します。ドラッグしたカーブ・アニメーションプレビュー・生成された cubic-bezier() CSS は端末から離れず、ArrayKit には何もアップロードされません。
CSS Formatter を開く
cubic-bezier ジェネレーター について
cubic-bezier() ジェネレーターでは、2 つの制御点をライブプロット上でドラッグして CSS のイージングカーブを形作り、トランジションやアニメーション用の正確な cubic-bezier(x1, y1, x2, y2) タイミング関数をコピーできます。ease・ease-in-out・弾むような ease-out-back のような名前付きプリセットから始め、マウスや矢印キーでハンドルを微調整します。アニメーションのドットがカーブをリアルタイムで再生するため、貼り付ける前に加速を体感できます。数値を当て推量せずに transition-timing-function や animation-timing-function の動きを調整するフロントエンド開発者・デザイナーのために作られています。すべては端末上でレンダリングされ、カーブ・プレビュー・生成された CSS がブラウザから離れることはありません。
機能
- 2 つの制御点をライブカーブ上でドラッグしてイージングを形作る
- 名前付きプリセット: linear・ease・ease-in・ease-out・ease-in-out・back カーブ
- アニメーションのドットと scale/opacity デモがカーブをリアルタイムで再生
- 正確な cubic-bezier() 値とそのまま使える transition-timing-function ルールをコピー
- 各ハンドルを矢印キーで微調整してピクセル精度でチューニング
- オーバーシュートのハンドルで y が 1 を超える弾む ease-back カーブを構築
- x 値は CSS が要求する 0～1 の範囲に自動でクランプ
- 現在のカーブが標準プリセットに一致すると認識してラベル表示
cubic-bezier ジェネレーター の使い方
- ease-in-out のようなプリセットを出発点として選びます
- いずれかの制御点をドラッグしてカーブを作り直すか、矢印キーで微調整します
- アニメーションプレビューを見て、作った加速を体感します
- cubic-bezier() 値または完全な transition-timing-function ルールをコピーします
- CSS の transition や animation ショートハンドに貼り付けます
例
入力
control point 1: 0.34, 1.56
control point 2: 0.64, 1
出力
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
ease-out-back カーブが 1 を超えてオーバーシュートし、控えめな弾みを生みます。
よくあるエラーとトラブルシューティング
- ブラウザが cubic-bezier() を無視して linear にフォールバックする。 — 両方の x 値が 0～1 の範囲内である必要があります。このツールは自動でクランプしますが、手入力した x1 や x2 がその範囲外だと値全体が無効になります。
- アニメーションが開始と終了で硬く見える。 — 各ハンドルを端点からさらに引き離してください。(0,0) と (1,1) に近いハンドルはカーブをほとんど曲げないため、動きがほぼ直線のままになります。
- 弾みが欲しいのに y 値が戻ってしまう。 — 制御点をプロットの上端より上（または下端より下）にドラッグして、y が 1 を超える（または 0 を下回る）ようにしてください。制約されるのは x だけで、y のオーバーシュートが予備動作や弾みを生みます。
- ハンドルをドラッグした後にプリセットが認識されなくなった。 — 変更を加えるとカーブがカスタムになるため、プリセットのラベルが消えます。プリセットのチップを再クリックすると正確な値に戻せます。
よくある質問
- cubic-bezier() の 4 つの数値は何を意味しますか？
- 2 つの制御点の x・y 座標です: cubic-bezier(x1, y1, x2, y2)。カーブの始点と終点は (0,0) と (1,1) に固定され、この 2 つのハンドルがその間のパスを曲げて、アニメーションの加速の仕方を決めます。
- x 値が 0～1 の間に留まらなければならないのはなぜですか？
- CSS では x 軸は時間経過に対するアニメーションの進行で、前にしか進みません。x1 と x2 を 0～1 に保つことで、カーブが各瞬間に単一の値を表すことが保証されます。y は範囲外に出てオーバーシュートや予備動作を作れます。
- 弾むイージングやオーバーシュートをどう作りますか？
- 制御点に 1 より大きいか 0 より小さい y を与えます。たとえば cubic-bezier(0.34, 1.56, 0.64, 1) は終点を超えてオーバーシュートしてから落ち着き、穏やかな弾みとして読み取れます。ハンドルをプロットの上や下にドラッグしてこれを行います。
- ease と ease-in-out の違いは何ですか？
- ease は cubic-bezier(0.25, 0.1, 0.25, 1) で、対称な ease-in-out（cubic-bezier(0.42, 0, 0.58, 1)）より少し速く始まります。ease-in-out は均等に加速して減速し、ease は動きをわずかに前寄りにします。
- この値を animation-timing-function にも使えますか？
- はい。cubic-bezier() は CSS がイージング関数を受け付ける場所ならどこでも動作し、transition-timing-function・animation-timing-function、そして transition と animation ショートハンドのタイミング枠も含みます。
- カーブをドラッグするとサーバーに何か送られますか？
- いいえ。エディター・アニメーションプレビュー・生成された CSS はすべて素の JavaScript でブラウザ内で計算されます。カーブに関する情報が ArrayKit にアップロードされることはありません。
関連ツール
すべての ArrayKit ツール