Easing describes how speed changes over an animation. Almost every good interface motion speeds up, slows down, or both. Linear timing is right for very few things, such as spinners and continuous marquees.
Three curves cover most interface work
- Ease-out (fast start, gentle stop) for things entering the screen. It feels responsive because movement starts immediately.
- Ease-in (gentle start, fast finish) for things leaving. They get out of the way.
- Ease-in-out for things moving from one place on screen to another.
Duration follows distance
Small changes like a button state want 100–200 ms. A panel sliding in wants 250–400 ms. Full-screen transitions can take 500 ms or more. If an animation makes someone wait to do their next thing, it is too long.
Give motion a reason
Before animating, name what the motion explains: where a thing came from, where it went, or what just changed. If you can't name it, the element probably doesn't need to move.
Check it with reduced motion on
Operating systems let people ask for less motion. Respect it: keep fades, drop large movement, parallax and auto-playing effects. Your design should still make sense with every flourish switched off.