Define delay for each property in the transition shorthand

Categories

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
CSS
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(
        0.4,
        0,
        0,
        1.1
      ) 600ms;
}

The order looks like this:

Code language
text
/* 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.


Comments

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me