cssでアニメーションをしたい時にはtransitionを設定したりanimationを設定したりします。
さらにアニメーションにイージングを細かく指定したい時にcubic-bezierを使うととても便利でした。
トランジションの変化が進行する時間をX軸、変化の度合いをY軸とした三次ベジェ曲線の軌跡によって、トランジションの進行度を指定します。
cubic-bezier(X1,Y1,X2,Y2)のように指定します。値は0から1です。
色々値を変えたり、図を動かしながらテストできるサイトがあるのでとても便利です。
cubic-bezier.com
