CSS Transitions

A transition smoothly animates a property change over time, rather than the change happening instantly.

.button {
  background: #3357ff;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #1a3fd1;
  transform: translateY(-2px);
}

Without transition, the button's background would snap instantly to the new color on hover. With it, the browser smoothly interpolates every intermediate color and position over the specified duration.

The transition shorthand takes up to four values:

.box {
  transition: property duration timing-function delay;
  transition: background-color 0.3s ease-in-out 0.1s;
}

• property — which CSS property to animate (all animates every animatable property, but is best avoided for performance since it forces the browser to watch everything).
• duration — how long the transition takes (0.3s or 300ms).
• timing-function — the pace of change: ease (default, starts slow, speeds up, ends slow), linear (constant speed), ease-in, ease-out, or a custom cubic-bezier() curve.
• delay — an optional pause before the transition starts.

Which properties animate smoothly: not every CSS property can transition. Numeric-like properties (color, width, opacity, transform) animate smoothly; properties like display cannot transition at all — it flips instantly between values. For the smoothest performance, transform and opacity are the two properties browsers can animate most efficiently, since they don't force the page to recalculate layout on every frame.