CSS TRANSITIONS

A CSS transition lets a property change smoothly over time instead of instantly.

Without transition:

• Button color changes instantly

With transition:

• Button color fades smoothly

Basic Syntax

transition: property duration timing-function delay;

👉 Example:

button {
  background: blue;
  transition: background 0.3s ease;
}

button:hover {
  background: red;
}

Transition ONLY works when a change happens

That means:

• Hover
• Focus
• Click
• JS class change

❌ It will NOT run automatically like animation