CSS transition-property Property

What You’ll Learn

The transition-property property chooses which CSS properties animate when values change — so you can smooth a color fade without accidentally animating everything.

Introduction

The transition-property property in CSS is used to specify the CSS properties to which a transition effect should be applied when their values change. This allows for smooth animations and transitions, enhancing the user experience by providing visual feedback during interactions such as hovering, focusing, or clicking elements.

Definition and Usage

Always pair transition-property with transition-duration (or use the transition shorthand). Properties not listed in transition-property will change instantly even if other properties animate smoothly.

📝 Syntax

The syntax for the transition-property property is as follows:

element {
  transition-property: property;
}

Here, property can be a specific CSS property name, all, or none.

Basic Example

.box {
  transition-property: width, background-color;
  transition-duration: 2s;
}

.box:hover {
  width: 200px;
  background-color: red;
}

Syntax Rules

• Accepts none, all, or one or more property names.
• Separate multiple properties with commas.
• Default is all when using transition longhands individually.
• Must be paired with a positive transition-duration to see animation.
• The property is not inherited.

Related Properties

• transition — shorthand for all transition longhands
• transition-duration — how long listed properties animate
• transition-delay — wait before animation starts
• transition-timing-function — speed curve during animation

🎯 Default Value

The default value of the transition-property is all, which means that the transition effect will apply to all the properties that change.

💎 Property Values

The transition-property property accepts keywords and CSS property names.

When to Use transition-property

Choose properties intentionally based on the effect you want:

• Hover lifts — Animate transform and box-shadow, not layout properties.
• Fades and reveals — Use opacity for panels, modals, and tooltips.
• Color feedback — Transition background-color, color, or border-color on buttons.
• Disable animation — Set none when you need instant state changes.

Examples Gallery

In this example, we’ll create a transition effect for the width and background-color properties of a div element.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition-property: width, background-color;
    transition-duration: 2s;
  }
  .box:hover {
    width: 200px;
    background-color: red;
  }
</style>

<div class="box"></div>

.card {
  transition-property: transform;
  transition-duration: 0.35s;
}

.card:hover {
  transform: scale(1.08);
  background: #dbeafe;
}

.panel {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.wrap:hover .panel {
  opacity: 1;
}

.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

♿ Accessibility

• Do not rely on motion alone — Ensure state changes are visible without animation.
• Reduced motion — Set transition-property: none when prefers-reduced-motion: reduce is active.
• Focus states — Include focus-visible properties (e.g., outline-color, box-shadow) in your transition list when styling keyboard focus.
• Avoid animating layout — Properties like width can cause reflow; prefer transform for motion effects.

property + duration + timing

transition-property names what animates; you still need duration (and optionally delay and timing function) for the effect to run.

.btn {
  transition-property: background-color, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* Shorthand equivalent */
.btn {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

💡 Best Practices