CSS ベジェ曲線イージングエディター

2 つの制御点を編集し、動きを試しながら cubic-bezier のイージングを作成できます。

X は 0〜1、Y はその範囲を超えて指定できます。ドラッグや矢印キーで調整し、Shift で移動幅を広げられます。

プリセット

ease ease-in ease-out ease-in-out linear

X1 Y1 X2 Y2

再生時間 · ms

CSS

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

画面遷移の加速や減速、行き過ぎる動きを曲線と照らし合わせて調整できます。

デザイン

プリセットを選び、制御点をドラッグするか X1・Y1・X2・Y2 を直接入力します。矢印キーにも対応し、Shift で調整幅を広げられます。確認用の時間を設定して手動で再生し、必要に応じて停止してから CSS をコピー・保存します。

X は 0～1、Y は −2～3 で、行き過ぎや戻りの動きも設定できます。出力はイージング宣言のみで、再生時間やアニメーション全体は含みません。OS の「視差効果を減らす」などの設定が有効な場合は動きを再生しませんが、編集と出力は可能です。

transition-timing-function だけを出力します。時間と対象プロパティは別途設定してください。制御点の x は 0〜1、y は −2〜3 です。

システムで動きを減らす設定が有効な場合、プレビューは移動アニメーションを再生しません。曲線の編集や書き出しは可能です。設定が無効なら、プレビュー時間が 100～5,000 ミリ秒か確認してください。この時間はプレビュー専用です。

してディスカッションに参加してください。

コメントはまだありません。