プリセット
比較
linear
ease
custom
使い方
ベジェ曲線の2つのコントロールポイントをドラッグすると、cubic-bezier()のタイミング関数がリアルタイムで編集できます。ease-in-outなど9種類のプリセットから始めて微調整することも可能です。 プレビューでは、作成したイージングとlinear・easeを並べてアニメーションを再生でき、再生時間も変えられるため、体感の違いを確認しながら調整できます。仕上がったcubic-bezier()の値はコピーしてそのままCSSに使えます。
- ドラッグ操作のビジュアル曲線エディタ
- 9種類のイージングプリセット
- linear / ease との並列アニメーション比較
- 再生時間を変えてプレビュー可能
- cubic-bezier()値のワンクリックコピー
こんなときに使おう
- CSSトランジションの動きの質感を微調整したいとき
- モーダルやメニューのアニメーションを設計するとき
- デザイナーとイージングの意図を共有したいとき
- イージングの違いを目で比べて学びたいとき