シャドウ生成
box-shadowを設計。
∿
キュービックベジェエディタ
CSSのイージング曲線を視覚的に設計。
曲線P1 · P2
プレビュー
再生するとボックスがこのイージングで左右に移動します。
x1
y1
x2
y2
transition-timing-function
cubic-bezier(0.25, 0.1, 0.25, 1)
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
x1 / x2 は 0〜1 に制限されます（CSS仕様）。y1 / y2 は範囲外も指定でき、オーバーシュートやバウンス風の動きを作れます。ハンドルをドラッグするか数値を直接編集してください。
キュービックベジェエディタについて
cubic-bezierエディタは、CSSの`transition-timing-function`や`animation-timing-function`で使うイージング曲線を、2つの制御点を動かして視覚的に作るツールです。xは0〜1に制限され、yはオーバーシュート用に範囲外も指定できます。
toco.toolsでは曲線キャンバス、数値入力、ease系プリセット、再生プレビューを揃え、完成した`cubic-bezier(...)`をそのままコピーできます。
すべてブラウザ内で完結し、入力はサーバーに送られません。
使い方
- プリセットを選ぶかハンドルをドラッグ
- 再生プレビューで動きを確認
- CSSをコピー
よくある質問（FAQ）
cubic-bezierとは何ですか？
CSSでアニメーションやトランジションの加減速を定義する曲線です。`cubic-bezier(x1, y1, x2, y2)`の形で書きます。
yが0〜1の外にあるとどうなりますか？
オーバーシュートやアンダーシュートが起こり、目標値を一度超えてから戻るような動きになります。
設定は外部に送られますか？
いいえ。すべてブラウザ内で処理されます。
ease などのキーワードと同じですか？
プリセットの ease / ease-in / ease-out / ease-in-out / linear は、ブラウザが定義する標準のcubic-bezier値に対応しています。