transition

transition describes how a changed CSS value moves from its old state to its new state. It does not change the value or trigger an effect by itself.

Toggle a transform

Check the box to change transform. The transition interpolates between the two values; unchecking reverses the change. Reduced-motion users get the new position immediately.

<input class="change" id="change" type="checkbox" /><label for="change"
  >Move the square</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

.stage {
  padding: 1rem;
  background: #eff6ff;
  min-height: 60px;
}
.box {
  width: 60px;
  height: 45px;
  background: #2563eb;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.box {
  transition: transform 600ms ease;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Give different properties different durations

The square changes both position and background. Commas separate each transition’s duration and easing; the state change is still supplied by the checkbox selector.

<input class="change" id="change" type="checkbox" /><label for="change"
  >Move the square</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

.stage {
  padding: 1rem;
  background: #eff6ff;
  min-height: 60px;
}
.box {
  width: 60px;
  height: 45px;
  background: #2563eb;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.box {
  transition:
    transform 600ms ease,
    background-color 200ms linear;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
  background-color: #0f766e;
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Syntax and resets

Each comma-separated transition can include a property, duration, easing, delay, and transition-behavior. The first time is duration and the second is delay; duration cannot be negative. Omitted values reset to all, 0s, ease, 0s, and normal. The shorthand is not inherited. None disables transitions.

Allow-discrete opts into eligible discrete-property transitions and has newer support than ordinary color/transform interpolation. Display changes also have special flip behavior and may need @starting-style for entry; do not assume that naming display alone creates a fade.

Common mistakes

No changed value or nonzero duration means no visible interpolation. Put transition on the base state when both entering and leaving should animate. All can animate newly added properties unexpectedly. Transforms/opacity often avoid layout work, but no property guarantees hardware acceleration. Preserve keyboard focus separately from motion.

Learn transition-property, transition-duration, and animation.

Sources and browser support

MDN: transition describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.