Loading…
cubic-bezier のイージング曲線を調整して、CSSの transition-timing-function を生成します。
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
4つの制御点（x1, y1, x2, y2）を調整してベジェ曲線を作成します。y は -1 未満や 1 超に設定するとオーバーシュート（行き過ぎ）の表現になります。
アニメーションの加速・減速の度合いを4つの制御点（2つの座標）で表すイージング関数です。transition-timing-functionに指定することで、動きの緩急を自由に調整できます。
曲線を調整するとcubic-bezier(...)の値が出力されるので、CSSのtransition-timing-functionやanimation-timing-functionにそのまま貼り付けてご利用ください。
ease・ease-in・ease-out・ease-in-outなど、よく使われる定番のイージングをプリセットとして用意しています。プリセットを起点に微調整して、好みの動きを作れます。