Controlling speed
Speed adjustments include duration (how long a transition lasts) and easing (acceleration over time). Controlling transitions by adjusting speed helps users understand UI changes, without complicating tasks.
Duration
Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that users feel as though they’re waiting. The right combination of duration and easing produces smooth and clear transitions.
Easing
Easing adjusts an animation’s rate of change, allowing transitioning elements to speed up and slow down, rather than move at a constant rate.
In the physical world, objects don’t start or stop instantaneously. Instead, they take time to speed up and slow down. Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work.