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

If you liked this post, you might like these ones, too

  1. Container Queries are actually coming

    After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

    Continue
  2. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  3. Getting started with CSS Custom Properties

    Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.