Control a Transition's Start Time with transition-delay

Resources

• transition-delay – MDN

Video review

• With transition-delay you can create two or more transitions and set delays to make each transition occur at different times.
• transition-delay accepts a time value in seconds or milliseconds.
• transition-delay accepts a comma-separated list of delay values; this lets you delay an element's transition properties individually.

For example:

.button {
  ...
  transition-property: opacity, background, box-shadow;
  transition-duration: .4s;
  transition-delay: .2s, .3s, 0s;
}