CSS Transitions

A transition interpolates a property from its old value to its new value. Name the properties, keep durations short, and preserve the end state when motion is reduced.

A CSS transition interpolates a property from its old value to its new value. Name the properties, keep durations short for UI feedback, and preserve the end state when motion is reduced. Hover and focus-within are common triggers; they should not be the only cue.

Duration, delay, and easing

The shorthand is property, duration, timing-function, then delay. Separate lists with commas when several properties share a story. Timing functions such as ease-out are usually more suitable for UI than linear motion. Interrupted transitions should not leave a control feeling stuck.

.card {
  transition: translate 160ms ease, border-color 160ms ease;
}
.card:is(:hover, :focus-within) {
  translate: 0 -0.25rem;
  border-color: #174986;
}

Reduced motion is a design path

prefers-reduced-motion asks you to minimize non-essential movement, not hide the result. Disable the named transitions and keep the border or color change. Target the properties you own instead of globally setting tiny durations with !important, which can break animation events in other widgets.

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { translate: none; }
}

• Keep durations short for controls.
• Do not delay essential feedback.
• The start and end states must still make sense with transitions disabled.

Prefer painting-space properties

Transforms and opacity are often smoother than animating width, top, or margin, but measure the actual interface. Continue to CSS Animations when the motion needs named keyframe stages rather than a from-to interpolation.