2つのハンドル P1・P2 をドラッグするか、よく使う曲線から始めてください。［再生］で動きを見て、［実行］を押すと一覧に入ります。

cubic-bezierとは何ですか？

アニメーションがどう加速・減速するかを決める曲線です。transitionやanimationのtiming-functionにそのまま入れられます。

CSSはどうやって受け取りますか？

CSS欄のコピーボタン、または保存した曲線のコピーボタンを押すと、timing-functionの一行がクリップボードに入ります。

CSSイージングエディター

アニメーションの速さの曲線を目で見ながら作り、cubic-bezierのCSSをコピーします。

プレビュー

P1 X

P1 Y

P2 X

P2 Y

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

P1・P2 のハンドルをドラッグして自分で形を作ることもできます。

曲線を作って［実行］を押すと、ここにたまります。