Codectionary / Developer documentation / CSS

Transitions

Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.

Syntax

transition: property duration timing-function delay;

Examples

A Basic Hover Transition

Smoothly animating a color and transform change on hover.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-control{padding:1rem;border:2px solid #1e40af;color:#fff;background:#2563eb;border-radius:.5rem}.risky:hover,.better:hover{background-color:#166534;box-shadow:0 4px 12px #0003;padding-inline:2rem}

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}
  1. The sample contains an actual interactive button with a visible state change.
  2. Hover changes the background and transform; the transition controls how those changes progress.
  3. Hover the controls or edit the state rules. A transition needs a changing value; merely declaring transition does not start an animation.
HTML used by this example
<button class="button preview-control">Hover or focus this button</button>

transition: all vs Specific Properties

Why targeting specific properties is usually better than "all".

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-control{padding:1rem;border:2px solid #1e40af;color:#fff;background:#2563eb;border-radius:.5rem}.risky:hover,.better:hover{background-color:#166534;box-shadow:0 4px 12px #0003;padding-inline:2rem}

.risky {
  transition: all 0.3s ease; /* animates EVERY property that changes, even unintended ones */
}

.better {
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* explicit and predictable */
}
  1. The sample contains an actual interactive button with a visible state change.
  2. Both buttons change colour, shadow and padding, but only the all variant also transitions the changed padding.
  3. Hover the controls or edit the state rules. A transition needs a changing value; merely declaring transition does not start an animation.
HTML used by this example
<div class="preview-row"><button class="risky preview-control">transition: all</button><button class="better preview-control">Named properties</button></div>

Parameters and values

  • transition-property (property name | all): Which property(ies) to animate
  • transition-duration (time): How long the animation takes
  • transition-timing-function (ease | linear | ease-in-out | cubic-bezier()): The pacing curve of the animation
  • transition-delay (time): Delay before the transition starts

Best practices

  • Prefer transitioning transform and opacity over properties like width or top - they can be animated by the GPU, resulting in much smoother performance
  • List specific properties rather than using transition: all, to avoid accidentally animating unrelated property changes
  • Keep UI transitions short (150-300ms) - longer durations start to feel sluggish rather than polished
  • Respect prefers-reduced-motion by disabling or reducing non-essential transitions for users who have that preference enabled

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading