transition-property

Specifies which CSS properties should be animated during a transition. You can list specific properties like 'transform' or 'opacity' to ensure you aren't accidentally animating things that might hurt performance.

It is documented as part of the CSS Transitions specification.

/* Usage Example */
.box {
  background-color: white;
  border: 1px solid grey;
  /* Only animate the background, keep the border change instant */
  transition-property: background-color;
  transition-duration: 0.5s;
}

/* Syntax */
transition-property: none;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

26+
16+
9+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC