1プリセット & タイミング
秒
秒
クリックで適用（そのままエディタで微調整できます）
2Cubic-Bezier / linear() エディタ
- cubic-bezier: 2つのハンドルをドラッグ。選択中は矢印キーで微調整（Shiftで大きく）。xは0〜1、yは範囲外もOK（-1〜2程度）
- linear(): エディタ内クリックで点を追加 / ドラッグで移動 / ダブルクリックまたはAlt+クリックで削除（両端は削除不可）
- 入力欄には cubic-bezier(…) / linear(…) / steps(…) / ease などを直接入力できます
3プレビュー
Space でも再生
バーはCSS Transition、ボックスはTransform + Transitionで表示。duration/delay/easingを共有します。
4コード
CSS
GSAP（CustomEase）
現在の timing-function
cubic-bezier(0.25, 0.1, 0.25, 1)使い方
- プリセットを選ぶ「プリセット」から近い動きを選びます。Duration（動く長さ）と Delay（動き出すまでの待ち時間）は秒で入力します。
- カーブを調整するエディタの2つのハンドルをドラッグして cubic-bezier を作ります。linear() のときはクリックで点を追加、ドラッグで移動できます。入力欄に値を書いて「反映」を押してもかまいません。
- プレビューで確かめるプリセットを選んだりハンドルを離したりすると、バーとボックスが動きます。「再生」で何度でも見直せます。
- コードをコピーするCSS か GSAP（CustomEase）のコードをコピーして、自分のページに貼り付けます。「URL共有」のURLを開くと、同じ設定を呼び出せます。
ショートカット
- Space 再生
- ←↑→↓ 選んだハンドル・点を 0.01 ずつ動かす（Shift で 0.1）
- Delete 選んだ点を削除（linear()）
- Alt＋クリック / ダブルクリック 点を削除（linear()）