Transitions

A transition animates a property smoothly from one value to another when it changes — on hover, focus, a class toggled by JavaScript, or a media query. Small, quick transitions make interfaces feel responsive and polished.

A basic transition

The transition goes on the element's normal state, so it runs in both directions — when the hover starts and when it ends.

Transition properties

Property	Sets	Example
`transition-property`	Which properties animate	`background-color, transform`
`transition-duration`	How long	`0.2s`, `300ms`
`transition-timing-function`	The speed curve	`ease`, `linear`, `ease-out`
`transition-delay`	Wait before starting	`0.1s`

CSS shorthand.css

.card {
  /* property duration timing-function delay */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out 0.05s;
}

Avoid transition: all: it animates properties you didn't intend, and costs performance. List the properties explicitly.

Timing functions

.track { position: relative; height: 34px; margin: 4px 0; background: #f4f6fa; border-radius: 4px; }
.dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d6336c;
  transition: left 1.2s;
}
.race:hover .dot { left: calc(100% - 24px); }
.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.in { transition-timing-function: ease-in; }
.out { transition-timing-function: ease-out; }
.bounce { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

Result

From top: linear, ease (the default), ease-in, ease-out, and a custom cubic-bezier() that overshoots. ease-out feels natural for things entering or responding to the user; steps(n) creates frame-by-frame motion, and linear() can describe springy curves point by point.

Good transition habits

Keep UI transitions short: about 150–300ms. Longer feels sluggish.
Animate transform and opacity when possible; they're the smoothest.
Respect users who prefer less motion (below).

Transitioning to and from display: none

transition-behavior: allow-discrete (here, the allow-discrete keyword in the shorthand) lets display participate in a transition, and @starting-style defines where an entering element animates from. Together they make enter and exit animations possible without JavaScript timing tricks.

Animating height to auto

Historically, CSS couldn't transition to height: auto. Newer browsers support it with interpolate-size: allow-keywords (or the calc-size() function). In browsers without support, the panel simply opens instantly.

Reduced motion

CSS reduced-motion.css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Some people experience dizziness or nausea from motion on screen, and set a system preference to reduce it. Honour it — this snippet is a common global safety net.

Try it yourself

PreviousTransforms NextAnimations