cubic-bezier

cubic-bezier ジェネレーター

制御点を動かして cubic-bezier のイージング曲線を作成。ease / in / out / in-out のプリセット付き。再生ボタンで実際の動きを確認できます。

使い方:制御点を動かすと、動きの緩急(イージング)カーブが作れます。「再生」で動作確認。

仕組み・詳しく
cubic-bezier(x1,y1,x2,y2) は、時間(横)に対する進み具合(縦)の変化を表す曲線。x は0–1、y は1を超えてもOK(跳ねる表現)。transition や animation の timing-function に使います。まずはプリセット(ease/in/out/in-out)から。

制御点 (0〜1, Y ははみ出しOK)

プリセット

プレビュー

—
広告