Easing Curve Visualizer

コントロールポイントの値を変更するか、カーブのハンドルをドラッグしてイージングのベジェ曲線を変更できます。

Control Point 1 x: y:

Control Point 2 x: y:

cubic-bezier()

クリックしたイージングの値をカーブに反映します。

スライダーでアニメーション秒数を設定できます。マウスオーバーでアニメーションが再生されます。

アニメーション秒数:

設定したイージング

比較用:linearイージング

設定したイージング

比較用:linearイージング

ベジェ曲線で表現できないタイプのアニメーションはこちらで確認できます。