transition-property

transition-property chooses which changed CSS values use a transition. It does not make every property continuously interpolable.

Transition position but change color immediately

The checkbox changes transform and background-color. Only transform is listed, so the color switches immediately while movement takes 800ms.

<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-property: transform;
  transition-duration: 800ms;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
  background-color: #0f766e;
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

List both intended properties

Adding background-color makes that value interpolate too. Explicit names avoid unintentionally animating later additions to the rule.

<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-property: transform, background-color;
  transition-duration: 800ms;
}
.change:checked ~ .stage .box {
  transform: translateX(100px);
  background-color: #0f766e;
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

Values and defaults

The initial value is all and the property is not inherited. None disables transitions; all selects eligible changed properties. A comma-separated list names specific properties. Unknown names do not produce an effect but still occupy their list position for corresponding times/easing values.

Common mistakes

Colors and lengths are normally continuously interpolated, not “discrete values.” Visibility has special interpolation behavior. Modern transition-behavior:allow-discrete can enable eligible discrete properties, including display with special timing; inspect that feature’s support rather than claiming display can never transition. A later transition shorthand resets the property list. No actual value change and zero duration remain common reasons for no effect.

Learn transition, transition-duration, and visibility.

Sources and browser support

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