Cubic Bezier エディター
コントロールポイントをドラッグして transition-timing-function の動きをカスタマイズしよう
プリセット
座標を直接入力
アニメーションプレビュー
CSS出力
.element {
transition: transform 1500ms cubic-bezier(0.42, 0, 0.58, 1);
}使い方
- P1・P2 のハンドルをドラッグしてカーブを変えてみよう
- プリセットチップをクリックして 8種類の代表的なイージングを体感しよう
- 「▶ 再生」で球が動く！速度ボタンで緩急の違いを確認しよう
- 「📋 CSS をコピー」して自分のスタイルシートにそのまま貼り付けよう