🎢

イージング関数ビジュアライザー

33種のイージング関数をグラフとボールアニメーションで確認。
CSS・JSコードをそのままコピーできます。

使い方

イージングを選ぶと、動きとグラフをすぐに比較できます。カスタムでは4つの制御点と速度を調整し、完成したCSSまたはJavaScriptコードをコピーします。

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