Define delay for each property in the transition shorthand


You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.

If you have a few properties that change with a transition, you can define a transition-delay for each of them, using the transition shorthand and separating each property with a comma.

Code language
button:hover {
  transition: background 200ms linear, color 200ms linear 200ms,
    transform 500ms cubic-bezier(0.4, 0, 0.7, 1.8) 300ms, border-color 300ms cubic-bezier(
      ) 600ms;

The order looks like this:

Code language
/* With timing function */
transition: property duration timingFunction delay;
transition: color 200ms linear 200ms;

/* Without timing function */
transition: property duration delay;
transition: color 200ms 200ms;

You can make some pretty cool state changes by adding some space between each change.

See the Pen Demo: separate delays for each transitioned property by Andy Bell (@piccalilli) on CodePen.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.