色とデザイン
Cubic Bezier エディタ
無料のcubic-bezierエディタ。ドラッグハンドル、プリセット、ライブアニメーションプレビューでCSSイージングカーブを視覚的にデザイン。トランジションやアニメーション用のCSSをコピー。
Runs in your browser
Cubic-bezier editor
CSS
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);css
編集者注
Understanding · Time, but with feeling.
この詳細な解説章は現在、英語版のみで提供されています。上の変換ツールはあなたの言語で動作しますが、長文の解説記事はまだ翻訳されていません。
よくある質問
Quick answers.
›What's a cubic-bezier?
A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).
›What's overshoot?
When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.
›Are presets available?
Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.
›Is the editor free?
Yes — fully free, no signup.
他の人はこちらも検索しています
関連ツール