From jumpy to smooth
When a button changes colour on hover, a transition makes it fade instead of snap. Transforms move, scale and rotate elements cheaply — perfect for lifting a card when you point at it.
transition and transform
- transition: property duration easing — which property to animate, how long, and how it speeds up and slows down.
- Transition specific properties (transform, opacity, colours) rather than all.
- transform: translate(x, y), scale(n), rotate(deg). Transforms don't disturb the layout around them, so they're smooth and cheap.
- Keep UI transitions short: 150–300ms.