曲線エディタ
制御点
プリセット
プレビュー
時間
1.0sCSS
すべてブラウザ内で動作し、何もアップロードしません。
CSS のアニメーション（transition / animation）で使うイージング曲線を、グラフ上の制御点をマウスやタッチでドラッグしながら作れる cubic-bezier ジェネレーターです。曲線を編集すると `cubic-bezier(0.25, 0.1, 0.25, 1)` のような値がその場で生成され、`transition-timing-function` などにそのまま貼り付けられる形でコピーできます。よく使う `ease` / `linear` / `ease-in` / `ease-out` / `ease-in-out` はプリセットボタンから一発で呼び出せ、そこから微調整して自分好みの効き具合（緩急）に仕上げられます。x1・y1・x2・y2 の4つの数値は直接入力でき、y は 1 を超える値や負の値も指定できるので、終点で一度行き過ぎてから戻る「オーバーシュート（バウンド）」のような曲線も作れます。右側にはこのイージングで実際に動くドットのプレビューがあり、再生ボタンで繰り返し再生・時間（duration）スライダーで速さを変えながら、「思った通りの動きになっているか」を目で確認できます。曲線の編集・プレビュー・コード生成はすべてあなたのブラウザ内だけで動作し、入力した値や設定をサーバーへアップロード・保存・送信することは一切ありません。
使い方
- グラフ上の2つの制御点をドラッグして曲線の形（緩急）を調整します。プリセット（ease / ease-out など）から始めると早いです。
- 右側のドットのプレビューで動きを確認します。再生ボタンで繰り返し再生、時間スライダーで速さを変えられます。
- 生成された `cubic-bezier(...)` を「コピー」して、CSS の `transition-timing-function` や `animation-timing-function` に貼り付けます。
よくある質問
入力した値や設定はアップロードされますか？
いいえ。曲線の編集・プレビュー・コード生成はすべてあなたのブラウザ内で完結し、入力した制御点の値や設定はサーバーへアップロード・保存・送信されません。完全にローカルで動作します。
オーバーシュート（行き過ぎて戻る）する曲線も作れますか？
はい。y1・y2 には 1 を超える値や負の値も入力でき、グラフでも単位の枠の外まで制御点を動かせます。これにより終点で一度行き過ぎてから戻るような、弾むような（バウンド/オーバーシュート）イージングを作れます。なお x1・x2 は cubic-bezier の仕様上 0〜1 に制限されます。
生成した cubic-bezier はどこに貼り付けますか？
CSS の `transition-timing-function` または `animation-timing-function`（あるいは `transition` / `animation` の一括指定の中）に貼り付けます。例: `transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);` のように使います。
ease や ease-in-out との違いは何ですか？
`ease` などのキーワードは、内部的には決まった cubic-bezier 値の別名です（例: ease = cubic-bezier(0.25, 0.1, 0.25, 1)）。プリセットからそれらを呼び出し、制御点を少しずらすだけで、標準のキーワードでは表現できない独自の緩急やオーバーシュートを持つイージングに調整できます。
プレビューの時間（duration）を変えても出力は変わりますか？
いいえ。時間スライダーはプレビューの再生速度を変えるためのもので、出力される `cubic-bezier(...)` の値（曲線の形）には影響しません。実際のアニメーションの長さは、貼り付け先の CSS で `transition` / `animation` の duration として指定してください。