CSS transitions and transforms: animate a specific visual property

Last updated: 5 Oct 20265 min read

tutorial

A transition interpolates supported property values when they change. A transform changes visual geometry without changing the element's normal-flow allocation.

How the rule works

A receipt action can shift a few pixels on hover, but its focus state must remain equally clear for keyboard users. Transition only transform rather than all properties, so later color or outline changes do not start unexpected motion. A transform can create a stacking context and move painted content over neighbors; test the full toolbar when buttons are close together. Motion should not become the only indication that an action is available. If a press state matters, express it with a visible label or state as well.

.receipt-action { transform: translateY(0); transition: transform 140ms ease-out; }
.receipt-action:hover { transform: translateY(-2px); }
.receipt-action:focus-visible { outline: 3px solid #205c8a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .receipt-action { transition: none; transform: none; }
}

Cost and verification

Transform animation often avoids layout recalculation, but it can still use compositor memory and trigger paint depending on the element. Measure a real page with many actions before calling the effect free. Test reduced motion, touch input, keyboard focus, and overlap at high zoom. The sample's two-pixel movement is decorative; removing it does not change access to the action.

Common Mistakes

Do not transition all properties without reviewing future state changes.
Do not assume transforms change surrounding layout space.
Do not hide a focus outline behind motion styling.

Connected lessons

Further rendering decisions

Related behavior decisions

Related component decisions

css

interaction

web