CSSイージング調整
cubic-bezierのカーブを見ながら、CSS transitionやanimationで使うイージングを調整できます。
カーブ調整ease
ハンドルをドラッグするか、数値を入力して調整できます。
現在の値cubic-bezier(0.25, 0.1, 0.25, 1)
プレビュー
同じイージングで要素が移動します。値を変えるとプレビューも再生されます。
CSS
transitionやanimationのtiming-functionとして利用できます。
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}このツールについて
cubic-bezierのカーブを見ながら、CSS transitionやanimationで使うイージングを調整できます。
- このツールはブラウザ内で処理します。ファイルや入力内容をサーバーへアップロードせずに使えます。
ユースケース
- CSS transitionやanimation用のイージングを調整する
- プリセットをもとにcubic-bezierの動きを確認する
- 調整した値をCSSコードとしてコピーする
よくある質問
- 何ができますか？
- cubic-bezierのカーブを見ながら、CSS transitionやanimationで使うイージングを調整できます。
- 入力内容はどのように扱われますか？
- 処理はブラウザ内で行われます。ファイルや入力内容は、処理のためにサーバーへ送信されません。
- CSSの標準プリセットだけで十分ではありませんか？
- 標準のeaseやlinearで足りる場合もあります。細かなUIの反応や余韻を調整したいときは、cubic-bezierの値を確認しながら調整すると扱いやすくなります。