🎢

Easing Visualizer

Easing Visualizer is a free browser-based tool. Supported files are processed locally whenever possible, with no installation required.

How to use

Choose an easing function to compare its motion and graph. In Custom mode, adjust the four control points and duration, then copy the CSS or JavaScript code.

X は 0〜1, Y は自由(オーバーシュート可)
進行度グラフ(横軸: 時間, 縦軸: 値)
800ms
アニメーションプレビュー
ease
type
CSSstandard
CSS cubic-bezier
ease
制御点 (x1, y1, x2, y2)
0.25, 0.1, 0.25, 1.0