ベジェ曲線をドラッグして、CSSアニメーションのイージング（動きの緩急）を作成します。プレビューで動きを確かめながら調整できます。
イージングとは
同じ距離を同じ時間で動かしても、速度の変化のさせ方で印象は大きく変わります。等速（linear）は機械的に見え、最初に速く動いて減速する動き（ease-out）は自然に感じられます。
cubic-bezier は2つの制御点の座標（x1, y1, x2, y2）で曲線を定義し、この速度変化を細かく指定するものです。
transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
定義済みのキーワード
| キーワード | 対応する値 | 印象 |
|---|---|---|
| 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) | ゆっくり始まりゆっくり終わる |
使い分けの目安
- 画面に入ってくる動き → ease-out（速く現れて自然に止まる）
- 画面から出ていく動き → ease-in（ゆっくり始まって加速）
- 位置を移動する動き → ease-in-out
- y座標を1より大きくすると、行き過ぎて戻る（バウンド）表現になります
よくある質問
Q cubic-bezierの4つの数字は何ですか？
2つの制御点の座標（x1, y1, x2, y2）です。xは0〜1の範囲、yは範囲外の値も指定できます。
Q 跳ねるような動きは作れますか？
yの値を1より大きくすると、行き過ぎてから戻る動きになります。
Q 既定のeaseと何が違いますか？
easeは cubic-bezier(0.25, 0.1, 0.25, 1) と同じです。細かく調整したい場合にcubic-bezierを使います。
Q transitionとanimationのどちらで使えますか？
どちらでも使えます。animation-timing-function にも同じ値を指定できます。