1. transition-property

Defines what to animate

transition-property: background;

👉 You can also use:

transition-property: all;

⚠️ Avoid all in large projects (performance issue)

2. transition-duration

Defines how long it takes

transition-duration: 0.5s;

👉 Units:

• s → seconds
• ms → milliseconds

 3. transition-timing-function

Controls speed curve

transition-timing-function: ease;

👉 Advanced:

cubic-bezier(0.68, -0.55, 0.27, 1.55);

cubic-bezier() is a custom timing function that controls how animation speed changes over time.

👉 Instead of using:

• ease
• linear

You define your own motion curve.

2. Syntax

cubic-bezier(x1, y1, x2, y2)

 What Do These 4 Values Mean?

Think of a graph:

• X-axis → time (0 → 1)
• Y-axis → progress (0 → 1)

(0,0) ----------- (1,1)
   ↑                ↑
 start            end

Now you control the curve between them using 2 points:

Point Meaning(x1, y1)controls start speed(x2, y2)controls end speed

Your Example Breakdown

cubic-bezier(0.68, -0.55, 0.27, 1.55)

Let’s decode it:

4. transition-delay

Defines when it starts

transition-delay: 0.2s;

5. Shorthand

transition: all 0.3s ease 0s;

👉 Order:

property | duration | timing | delay

6. Multiple Transitions

transition: 
  background 0.3s ease,
  transform 0.4s ease-in;

7. Real Examples

🔹 1. Button Hover

button {
  background: black;
  color: white;
  transition: background 0.3s ease;
}

button:hover {
  background: orange;
}

🔹 2. Scale Effect (Modern UI)

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

🔹 3. Smooth Underline Effect

a {
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: black;
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}