These three CSS features help create dynamic, interactive, and smooth visual effects on web pages. 🚀 They allow elements to change appearance, move, and animate beautifully.

🎨 1. CSS Transitions – Smooth Property Changes

CSS Transitions enable a smooth change of property values over time, triggered by events like hover or focus.

📝 Basic Syntax:

selector {
  transition: property duration timing-function delay;
}

✅ Breakdown:

• 🎯 property – The CSS property to animate (e.g., background-color, width).
• ⏳ duration – How long the transition lasts (1s, 500ms).
• 📈 timing-function – Defines speed behavior (ease, linear).
• 🕒 delay – Wait time before transition starts (0s, 1s).

🔥 Example – Background Color Change on Hover:

button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

👉 When hovered, the button smoothly changes color from blue to red in 0.3s.

⏳ Common Timing Functions:

• 🟢 ease – Starts slow, speeds up, then slows down.
• 🚀 linear – Moves at a constant speed.
• 🏁 ease-in – Starts slow, then speeds up.
• 🎢 ease-out – Starts fast, then slows down.