sunweb

Easings

foundations easings

Definition


Easing is a way to adjust an animation’s rate of change. Easing allows transitioning elements to speed up and slow down, rather than moving at a constant rate. Easing makes elements move as though influenced by natural forces like friction.


easing--base cubic-bezier(0.64, 0, 0.35, 1)

easing--in cubic-bezier(0.36, 0, 1, 1)

easing--out cubic-bezier(0, 0, 0.42, 1)

easing--excite cubic-bezier(0.18, 0.67, 0.6, 1.22)

easing--overshoot cubic-bezier(0.07, 0.28, 0.32, 1.22)

easing--anticipate cubic-bezier(0.38, -0.4, 0.88, 0.65)

easing--linear linear