Multiple Transitions

Written by

You can animate multiple properties at once.

Example:

.box {
  transition: background 0.5s, transform 0.5s;
}
.box:hover {
  background: coral;
  transform: scale(1.2);
}

Practice Task:
Animate background color, box-shadow, and scale together on hover.

Lesson 5: Transition Delay

Add a delay before the transition starts.

Example:

.box {
  transition: background 0.5s ease 1s;
}

Practice Task:
Create a button that starts animating 1 second after hover.