制御点
0.4, 0, 0.2, 1
出力
cubic-bezier(0.4, 0, 0.2, 1)
デザインツール
CSSキュービックベジェ - イージング曲線の確認
4 つの cubic-bezier control point を視覚的に編集し、easing curve を preview しながら transition / animation 用 timing function をコピーできます。button motion や page transition の調整に便利です。
CSSAnimationEasing
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSSキュービックベジェ
4 つの cubic-bezier control point を視覚的に編集し、easing curve を preview しながら transition / animation 用 timing function をコピーできます。button motion や page transition の調整に便利です。
最终 CSS 转场代码
调整控制点或时长后，预览动画和复制代码会保持一致。
利用シーン
- button motion の timing を調整する
- page transition 用 easing を作る
- design file の motion curve に近づける
使い方
- 4 つの control point をドラッグするか数値入力する
- curve と animation preview を確認する
- cubic-bezier 値をコピーする
入出力サンプル
FAQ
transition にそのまま使えますか？
はい。cubic-bezier(...) を transition-timing-function または animation-timing-function にそのまま貼り付けられます。
control point の範囲はどうなっていますか？
x は通常 0〜1、y は overshoot 表現のため 0〜1 の外側も取り得ます。preview で体感を確認してください。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS グラデーションジェネレーター
CSS グラデーションジェネレーター - Linear、Radial、Conic
linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。
CSS グラデーション 背景
CSS Clamp ジェネレーター
CSS Clamp ジェネレーター - 流体的レスポンシブサイズ
最小・最大 viewport 幅と目標サイズ範囲から、font size、spacing、そのほか length を viewport に応じて伸縮させる clamp() 式を計算できます。
CSS clamp Responsive