🎯 CSS transition-property — Define What Should Animate

The transition-property in CSS lets you specify exactly which CSS properties should animate when they change. Without this, you can’t control what transitions — or might accidentally animate unwanted things.

---

🔹 What Does transition-property Do?

It tells the browser:

“Only animate these specific CSS properties when they change.”

---

📘 Syntax

selector {
  transition-property: property-name [, property-name ...];
}

You can list:

• A single property: e.g., opacity
• Multiple properties: e.g., background-color, transform
• Or use all (which means: animate any animatable property that changes)

---

✅ Examples

✨ Basic Usage

.box {
  transition-property: background-color;
  transition-duration: 0.3s;
}

.box:hover {
  background-color: gold;
}

✅ Only the background-color will animate when hovered.

---

💡 Multiple Properties

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

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

✅ Both transform and box-shadow will animate smoothly.

---

🎯 Using all (Wildcard)

.button {
  transition-property: all;
  transition-duration: 0.5s;
}

✅ Every animatable property that changes will transition.

⚠️ Use all with care! It can trigger performance issues if many properties are animating unnecessarily (e.g., width, height).

---

🖼️ Image Idea: Visual Comparison

Property Changed	With transition-property: background-color	With transition-property: all
background-color	✅ Smooth	✅ Smooth
width	❌ Jumps instantly	✅ Animates
opacity	❌ No effect	✅ Animates

🎯 Visual: Boxes changing only specified properties on hover.

---

🧠 Common Animatable Properties

Type	Example Properties
Visual effects	opacity, visibility, color
Position & size	transform, margin, top
Box style	box-shadow, border, outline
Text	letter-spacing, line-height

---

🎛 Pro Tip: Combine With Other Transition Properties

.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function: ease, ease-in-out;
}

✅ transform animates for 0.3s, box-shadow for 0.5s — each with its own timing.

---

✅ Summary

Property	transition-property
What it does	Declares which properties animate
Default	all
Best practice	Specify properties for better performance
Works with	transition-duration, transition-delay, etc.

---

🔚 Final Thought

Think of transition-property as the director of your animation — it tells your browser which properties deserve a smooth entrance or exit. Use it wisely to create crisp, intentional, and elegant UI effects.