CSS transition syntax

transition: property duration timing-function delay;

Multiple properties can be transitioned by separating with commas: transition: opacity 0.3s ease, transform 0.5s ease-out.

Common timing functions

Keyword	cubic-bezier equivalent	Feel
`ease`	`cubic-bezier(0.25, 0.1, 0.25, 1)`	Starts fast, slows at end (default)
`linear`	`cubic-bezier(0, 0, 1, 1)`	Constant speed
`ease-in`	`cubic-bezier(0.42, 0, 1, 1)`	Starts slow, ends fast
`ease-out`	`cubic-bezier(0, 0, 0.58, 1)`	Starts fast, ends slow (natural feel)
`ease-in-out`	`cubic-bezier(0.42, 0, 0.58, 1)`	Slow at both ends

Performance tip

For the best animation performance, only transition transform and opacity. These properties are composited on the GPU and do not trigger layout or paint. Avoid transitioning width, height, top, or margin, which cause reflows.

Which properties can be transitioned?

Not all CSS properties are transitionable. Properties must have interpolatable values - i.e., the browser must know how to compute intermediate values between the start and end states.

Transitionable: opacity, transform, color, background-color, width, height, margin, padding, font-size, border-width, box-shadow, filter.

Not transitionable: display (cannot transition between none and block), visibility (but can be delayed with transition-delay), font-family (discrete value).

Workaround for display: none: Animate opacity from 1 to 0, then set visibility: hidden afterward using a transition delay:

.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s; /* visibility changes after opacity finishes */
}

Staggered transitions

To create sequential entrance effects (e.g., list items animating in one by one), apply incremental transition-delay values:

.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }
/* etc. */

Alternatively, use CSS animations with animation-delay calculated via calc() and a CSS variable in JavaScript. Staggered motion is a hallmark of polished UI design (popularized by Material Design and iOS animations).