キレのあるボタン反応
hover にスタンダードイージング
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}立ち上がりの大半が一気に進み、最後にすっと収まるため、もっさりせずカーソルに反応している感覚になります。
cubic-bezier ジェネレーター
ライブのアニメプレビュー付きで CSS のイージング曲線をデザイン。
最終更新
曲線2 つのハンドルをドラッグ
アニメーション
CSS
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}cubic-bezier イージング ジェネレーターとは？
CSS の *イージング関数* は、アニメーションが時間の中でどう加速・減速するかを決めます。ease ease-in ease-out ease-in-out の 4 つのキーワードは、決まった 4 種類の曲線へのショートカットです。それを超えたい場合に登場するのが cubic-bezier() - 4 つの数値だけでオリジナルの曲線を描く関数です。
この 4 つの数値は、2 つの制御点（x1, y1, x2, y2）の座標です。手で書こうとすると面倒で、ほんの少しの差が大きな見た目の差につながり、わずかなオーバーシュートが *弾むような* 動きを生みます - 数字だけ眺めていても感覚はつかめません。ビジュアルエディタなら、ハンドルを動かして曲線の反応をその場で確認できるので、はるかに速くチューニングできます。
Coddy のエディタは、曲線をリアルタイムに描画し、プレビューのボールを実際のイージングで走らせ、よくあるパターンのプリセット（CSS キーワード／Material Design のスタンダード／弾む bouncy-out／オーバーシュートを伴う anticipate）を備えています。生成された cubic-bezier() 文字列をコピーして CSS に貼り付けるだけ。すべてブラウザ内で動きます。
cubic-bezier イージングで知っておきたいこと
- 曲線は *時間* に対する *進行度* のグラフです。横軸は時間（左 0 → 右 1）、縦軸は進行度（下 0 → 上 1）。45° の直線が
linear、つまり時間あたりの進みが一定です。 - 両方の制御点の X 座標は 0..1 にクランプされます。Y 座標は 0 より下、1 より上にも出せます。これが弾み、anticipate、オーバーシュート（目標を一瞬通り越したり、最初に逆方向へ動いたり）を生みます。
- *ease-out* 系（進行の大部分が早めに済む）は機敏で反応が良く感じられます - 出現や、ボタンのリアクションに向きます。*ease-in* 系（進行が遅めに集中）はもっさりして見えがちで、退場には向くものの UI で乱用すると違和感が出ます。
cubic-bezier イージングの作り方
プリセットから始める
目指す感触に近いプリセットをまず選びましょう。*Material standard* と *Bouncy out* は UI モーションの良い出発点で、入場アニメーションなら *ease-out* が無難な既定値です。
2 つのハンドルをドラッグする
色付きの丸が 2 つの制御点です。最初のハンドルでアニメーションの *入り*、2 つ目で *締め* を整えます。ハンドルをキャンバスの上端より外まで引っ張ると、オーバーシュート（行き過ぎ）になります。
再生時間を決めて再生する
実際に使う想定の再生時間を入れます。UI トランジションは 150〜300ms、強調モーションは 400〜600ms が目安。*Replay* を押すと現在の設定で再再生されます。
数値入力で仕上げる
正確な値が欲しいときは X1／Y1／X2／Y2 の入力欄に直接入力します。Y は 0..1 を超えても OK、X は常に 0..1 の範囲です。
CSS をコピーする
*コピー* を押すと
transitionルール一式が手に入ります。スタイルシートに貼り付け、transformを実際にアニメーションさせたいプロパティに置き換えてください。
cubic-bezier クイックリファレンス
よく使うイージングと、その正体となる cubic-bezier 値。CSS キーワードは特定の曲線のエイリアスです。
| イージング | cubic-bezier 値 | 使いどころ |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | transition の既定値 - 穏やかだが個性は薄い |
linear | (0, 0, 1, 1) | 一定速度 - UI には不向き、スピナーには適切 |
ease-in | (0.42, 0, 1, 1) | 遅く入って速く抜ける - 退場に向く |
ease-out | (0, 0, 0.58, 1) | 速く入ってゆっくり収まる - 入場やリアクション向け |
ease-in-out | (0.42, 0, 0.58, 1) | 対称 - 切替えなどの行き来する動きに向く |
| Material standard | (0.4, 0, 0.2, 1) | モダンで小気味よい UI モーション |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | 行き過ぎて落ち着く - 遊び心のある入場 |
試したい cubic-bezier 例
弾む入場
行き過ぎて落ち着く
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 が 1.28 なので、目標を通り越してから戻ります。気持ちよい一方で乱用は禁物 - どこも彼処も弾ませると賑やかすぎて疲れます。
動きの前にアンチック（anticipation）
一瞬戻ってから前へ
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Y1 を負にすると、目標へ進む前に一瞬だけ *逆方向* に動きます。クラシックアニメーション由来の手法で、わずかなタメで本動作が意図的に見えます。
イージングでよくあるミス
- 入場アニメーションに
ease-inを使う。遅く入って速く抜けるので、反応が良いとは正反対の印象になります。ease-outを選ぶのが正解です。 - 「中立的だから」と UI に
linearを選ぶ。等速モーションは機械的に見えます。プログレスバーやスピナーには合いますが、それ以外では使いどころが限られます。 - あらゆるトランジションでオーバーシュートを使う。弾むイージングはアクセント。デフォルトにすると、画面全体が落ち着かなくなります。
cubic-bezier に関するよくある質問
cubic-bezier() の 4 つの数字は何を表していますか？
2 つの制御点の x／y 座標です -
cubic-bezier(x1, y1, x2, y2)。最初の点が *始まり方* を、2 つ目の点が *終わり方* を決めます。X は常に 0〜1（時間）、Y はオーバーシュートやアンチック効果のため 0..1 をはみ出すことも可能です（進行度）。UI アニメーションにはどのイージングを選べばいい？
入場（要素が現れる）やリアクション（hover, focus）には *ease-out* か Material Design のスタンダード
cubic-bezier(0.4, 0, 0.2, 1)。退場には *ease-in*。プログレスを除き、*linear* は通常避けます。ease と ease-out の違いは？
どちらもゆっくり終わりますが、
ease は始まりも穏やかです。ease-out は最初から最大速度で動き始め、その *即時の動き出し* が「反応が良い」感覚を作ります。CSS で弾むアニメーションを作るには？
2 つ目のハンドルをキャンバス上端より上にドラッグします（Y2 > 1）。例：
cubic-bezier(0.18, 0.89, 0.32, 1.28) は目標を約 28 % 超えてから落ち着きます。複数回弾ませたい場合は @keyframes か spring 系ライブラリが必要 - cubic-bezier は 1 回だけのオーバーシュートしかできません。@keyframes アニメーションでも cubic-bezier を使える？
はい。
animation-timing-function や animation ショートハンドで指定できますし、キーフレームごとに別のイージングを当てることもできます。多段階モーションでも段ごとに違う動きを設計できます。