The transition-property CSS property determines which of an element’s properties should undergo an animated transition when their values change. It acts as a filter: only the properties named in this list will animate when their computed values change, while others will jump to their new values immediately. This property is useful for limiting animations to only the properties you intend to animate, avoiding unintended or costly animations when many properties change at once.

Because transition-property only selects which properties participate in transitions, it works together with timing and duration controls to produce the visible effect. The length and pacing of each transition are controlled by transition-duration and transition-timing-function, and any start delay is set by transition-delay. These transition sub-properties (and their order) can also be specified together using the shorthand transition, but transition-property retains its role as the selector of which properties will animate.

In practice, you choose which properties to include in transition-property with performance and predictability in mind. Animating composited properties such as transform or opacity is typically more efficient and smoother than forcing layout-triggering properties to animate. Also note that listing a property here has no effect unless that property’s computed value actually changes; if it doesn’t change, no transition will run.