アニメ曲線を描く
グラフ上の2つのハンドルをドラッグしてイージングを形作り、アニメのボールで動きを確認し、CSS用のcubic-bezier()値をコピー。
-
プリセットから
ease, ease-in-out, linear…
-
ハンドル調整
X=時間(0–1)、Yは弾みで自由。
-
CSSをコピー
transition か animation に貼り付け。
CSSプリセット
| 名前 | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
Xは[0,1]、Yは弾みで超過可。Web Animations APIでプレビュー、すべてローカル。
よくある質問
cubic-bezier曲線とは？
アニメがどう加速・減速するかを表すタイミング関数。2つの制御点（x1, y1, x2, y2）で定義します。CSSでは transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1)。
なぜY値は1を超えられる？
X は0〜1（時間）に収まりますが、Y は [0,1] を超えてバウンドや行き過ぎ（要素が先に進んで戻る）を作れます。これが「back」や弾性の曲線です。
CSSでの使い方は？
値を transition: all 0.3s cubic-bezier(…) や animation-timing-function に貼り付けます。アニメプレビューで貼る前に実際の動きを確認できます。
標準プリセットは？
ease = cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)、ease-in-out = (0.42, 0, 0.58, 1)、linear = (0, 0, 1, 1)。プリセットから始めてハンドルを調整。