Transitions, Transforms, and Respecting Motion

What this is. A transition smooths a change that was going to happen anyway. You declare it on the resting state, not on the hover state, so it applies in both directions.

`

.button {

background: var(--brand);

transition: background 200ms ease, transform 200ms ease;

}

.button:hover { transform: translateY(-2px); }

`

Transform, not position. transform: translateY(-2px) moves an element visually without affecting layout, so nothing around it shifts. Animating top or margin forces the browser to recalculate the layout of the page on every frame, which is what makes some sites feel sluggish. transform and opacity are the two cheapest things to animate.

✦ prefers-reduced-motion is not optional

For people with vestibular disorders, motion on a screen can cause genuine nausea and dizziness. The operating system already has a setting for this, and honoring it is three lines of CSS. Motion should be an enhancement that can be switched off, never something the interface depends on to make sense.