CSS transition-property Property

Defines which CSS properties will undergo a smooth transition effect when their values are changed.

selector { transition-property: none | all | <property-name>; }

none	Ensures that no CSS properties will transition.
all	Applies the transition effect to all animatable CSS properties.
<custom-ident>	A specific CSS property name, such as opacity or background-color, to be transitioned.

Code Examples

A basic example showing a smooth background color change when the user hovers over the element.

<style>
.box {
  width: 100px;
  height: 100px;
  background: #ff0000;
  transition-property: background;
  transition-duration: 0.5s;
}
.box:hover {
  background: #0000ff;
}
</style>
<div class="box"></div>

An advanced example using JavaScript to toggle a class, where multiple properties transition at different speeds.

<style>
.btn {
  padding: 15px 30px;
  background: #333333;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition-property: transform, background;
  transition-duration: 0.2s, 0.5s;
}
.btn.active {
  background: #2196f3;
  transform: scale(1.1);
}
</style>
<button id="ui-toggle" class="btn">Click to Toggle</button>
<script>
const btn = document.querySelector("#ui-toggle");
btn.addEventListener("click", () => {
  btn.classList.toggle("active");
  btn.style.color = "#ffffff";
});
</script>

Pro Tip

You can comma-separate multiple properties to give them unique personalities. Set "opacity" to change quickly so the element feels responsive, but let the "transform" take longer to finish its move, creating a layered, professional animation effect that feels more organic.

Deep Dive

Think of "transition-property" like a guest list for a VIP lounge. Only the CSS properties you put on this list get to enjoy a smooth, timed animation; everyone else has to snap instantly to their new value. When you change a style—like on a hover or through a class swap—the browser looks at this list to see if it should interpolate the change over time or just flip the switch immediately. If you list multiple properties, they must be separated by commas, and they will correspond to the order of values in other transition sub-properties like duration or delay.

Best Practices

Always try to list specific properties like "opacity" or "transform" instead of using the "all" keyword. Using "all" forces the browser to monitor every single property for changes, which can hog resources and kill performance on mobile devices or busy layouts. It is also cleaner for your codebase to be explicit about what you are animating.

Common Pitfalls

You cannot transition every CSS property. Attempting to transition "display" is a classic mistake; it will not fade out, it will just vanish because it is not a numerical or color value the browser can calculate steps for. Also, remember that this property does nothing without a "transition-duration" value being set, as the default duration is 0 seconds.

Accessibility

Overusing transitions or making them too slow can frustrate users who rely on screen readers or those with motion sensitivity. Use the "prefers-reduced-motion" media query to turn off or simplify transitions for users who have that setting enabled in their operating system to ensure your UI remains usable for everyone.

Dev Data Table: transition-property property

default	all
animatable	no
inherited	no
experimental	no
year_intro	2009
year_standard	2013
js_syntax_1	element.style.transitionProperty = "opacity";
js_syntax_2	element.style.setProperty("transition-property", "opacity");
js_note	In JavaScript, use camelCase transitionProperty when accessing the style object directly.
browsers	{ "Chrome": 26, "Edge": 12, "Firefox": 16, "Safari": 6.1, "Opera": 12.1, "Chrome Android": 26, "Safari on iOS": 7, "Samsung Internet": 1, "Opera Mobile": 12.1 }