CSSイージング生成
cubic-bezier値を調整し、transition CSSとカーブプレビューを生成します。
このツールについて
x1、y1、x2、y2の値を直接調整してcubic-bezierイージングを作成できます。
ボタンhover、モーダル、カード移動、インタラクションアニメーションの動きを素早く比較できます。
カーブプレビュー
イージング値
cubic-bezier(0.25, 0.1, 0.25, 1)
結果
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›デザインシステムに入れるtransition timing functionを作成します。
- ›アニメーションカーブを視覚的に確認しながら値を調整します。
- ›CSSコードとcubic-bezier値をまとめてコピーします。