cubic-bezierジェネレーター — CSSイージング編集
ドラッグできる制御点でCSSのイージング曲線を作成。アニメーションをプレビューしてcubic-bezier()値をコピー。プリセット付き。ブラウザ内で完結。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
2つのハンドルをドラッグして曲線を調整。
このツールについて
このcubic-bezierエディターでは、グリッド上で2つの制御点をドラッグして、独自のCSSイージングカーブを作れます。カーブを変形させるたびにアニメーションプレビューがその動きをリアルタイムで再生するので、トランジションがどのように加速・減速するかを正確に体感できます。納得のいく形になったら、cubic-bezier()の値をコピーして、CSSのtransitionやanimationに貼り付けてください。組み込みのeaseやlinearといったキーワードよりはるかに表現力が高く、エディター全体がブラウザ内でローカルに動作します。
よくある質問
cubic-bezierのカーブは実際に何を制御しているのですか?
それはアニメーションのタイミング、つまり再生時間の中で進行度がどう配分されるかを制御します。長さや移動距離そのものではありません。カーブは横軸の経過時間を、縦軸のアニメーションの進行度に対応づけます。傾きが急な区間は速い動きを、平らな区間は遅い動きを意味します。ドラッグできる2つの制御点がこのカーブをしならせ、ゆっくり始まる動きや一気に弾ける動き、その中間のあらゆるイージングを設計できます。
制御点の値は0〜1の範囲を超えられますか?
2つの時間の値(各制御点のX座標)は0〜1の間に収める必要がありますが、進行度の値(Y座標)は1を超えても0を下回ってもかまいません。Yをその範囲の外まで動かすと、アニメーションが目標を行き過ぎてから戻ってきたり、前に進む前にいったん引いたりします。これが弾むような動きや弾性、予備動作(アンティシペーション)の効果の基礎です。プレビューでこの動きがはっきり分かるので、やり過ぎずにちょうどよい弾みに調整できます。
値はどこで使い、エディターは端末内で動作しますか?
cubic-bezier()の値は、CSSのtransition-timing-functionやanimation-timing-functionに貼り付けてください。ease-in-outなどのキーワードの代わりになります。最新のブラウザすべてで動作します。エディター自体はローカルなJavaScriptでブラウザ内で完結し、カーブもライブプレビューも生成される値も、すべてあなたの端末上で計算されます。そのため、作成したものがサーバーへアップロード・保存されることはありません。