Animation utilities for animation-delay etc.

[itpropro]

Hey everyone,
I just had the third time that I stumbled upon a case where it would have been very helpful to have utilities for animation like

animation-delay-75

similar to the transition-delay utility.
There are a lot possibilities for animations with the same animation applied to multiple objects only different by animation-delay, e.g. some from spinkit (https://github.com/tobiasahlin/SpinKit/blob/742a71277c49b69053b5beb9fad80d720840a2ab/spinkit.css#L126).
Currently I would just add the property in custom css or a style tag, but it would be the easiest to just add class="animation-delay-500" to one of the related divs. I could also create a custom utility with something like

@layer utilities {
  .animation-delay-75 {
    animation-delay: 75ms;
  }
  .animation-delay-500 {
    animation-delay: 500ms;
  }
  .animation-delay-1000 {
    animation-delay: 1s;
  }
}

Are there any plans to include more animation utilities and if not what is the suggested way for this? Using css, style tags, custom utilities or creating two animations in the tailwind.config.js with different delays?

[Couchh]

Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration all the animations will respond to that change

AESsuccess

[itpropro]

animation-delay would help a lot with a construct like this:

...
    <div class="cool-animation"></div>
    <div class="cool-animation"></div>
...
<style scoped>
.cool-animation {
  @apply w-full h-full rounded-full bg-teal-500 opacity-60 absolute top-0 left-0 animate-cool;
}
</style>

I could then just add something like animation-dealy-500 to one of the classes to make it offset just the right amount instead of having to add style tags or two animations.

[danon]

I find it unexpected and distracting that there is delay-100 for transition-delay, but there's nothing for animation-delay.

[doniyorkhasanov]

There is a plugin called tailwindcss-animation-delay. You can use it.
Link to github repo: https://github.com/burnworks/tailwindcss-animation-delay#readme
It worked for me

[AmirHosseinKarimi]

Cool. But this feature can exist in Tailwind without any plugin. I am looking for it...

[phamthainb]

Now you can use Arbitrary values for custom animate property.
Like that:

<span className="animate-[bounce_1s_infinite_100ms]">.</span>

docs here

[danon]

That's just plain CSS with extra steps.

[dilincoln]

That's solve my problem

[timostermann]

My solution is to write a custom utility for animation-delay based on the theme values for the transition-delay utility. This way you don't have to add a utility for every single value.

In tailwind.config.js:

plugins: [
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          "animation-delay": (value) => {
            return {
              "animation-delay": value,
            };
          },
        },
        {
          values: theme("transitionDelay"),
        }
      );
    }),
  ],

[rvanbaalen]

This works perfectly, thanks! No need to install third-party plugins, dead simple solution. Even works with custom values like animation-delay-[2000ms]

[menasheh]

I'll use this for now, but this should be baked in to the default config.

[prayaslashkari]

This is perfect <3

[grandwaterman]

it gives me error: plugin is not defined

[vastava]

@grandwaterman you have to import the plugin function, instructions here: https://tailwindcss.com/docs/plugins

[dei8bit]

i think that a solution can be just add the correct parameter in custom animations for example:

theme: {
    extend: {   
      animation: {
        "text-in": "text-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both"
      },
      keyframes: {
        "text-in": {
          "0%": { "filter": "blur(12px)", "opacity": "0" },
           to: { "filter": "blur(0px)", "opacity": "1" },
        },
      },

Where de last "3s" (three seconds) written in animation refer to animation-delay propery in CSS

[playstore777]

This way you are restricting it for one use-case, for other place where you want different amount of delay, you need to create a new animation with new name. FYI tailwind also solves css naming problem.

Eg: To add delay of 200ms and 600ms you need to create "text-in-200" and "text-in-600" respectively. Better solutions are to either use global.css or tailwind.config and add a utility plugin.

[mnbucher]

I found another great alternative for adding a dynamic delay. In my case, I had multiple divs as a list and wanted to add a step-wise delay for each animated div element, given the index variable (a counter indexing all elements from 0 to N):

const animationStyle = {
    animationDelay: `${index*150}ms`,
    animationFillMode: 'both',
  };

<div className="animate-fade-in-up" style={animationStyle}> ... </div>

In my case, animate-fade-in-up is my custom keyframe animation defined in tailwind.config.js

[podrivo]

This should be default! The plugin solution worked for me.

[iProGamer]

💀

[mrgwd]

Another solution to this problem is to modify the delay class to generates utility classes that apply both transition-delay and animation-delay properties using this plugin.

plugins: [
  plugin(function ({ matchUtilities, theme }) {
    matchUtilities(
      {
        delay: (value: string) => {
          return {
            "transition-delay": value,
            "animation-delay": value,
          };
        },
      },
      {
        values: theme("transitionDelay"),
      },
    );
  }),
],

Make sure to import plugin from "tailwindcss/plugin".

[condemil]

Would be great to have animation-duration as part of duration-* in v4. As a temporary solution it is required to add the following in css file:

@utility duration-0 { animation-duration: 0ms; }
@utility duration-75 { animation-duration: 75ms; }
@utility duration-100 { animation-duration: 100ms; }
@utility duration-150 { animation-duration: 150ms; }
@utility duration-200 { animation-duration: 200ms; }
@utility duration-300 { animation-duration: 300ms; }
@utility duration-500 { animation-duration: 500ms; }
@utility duration-700 { animation-duration: 700ms; }
@utility duration-1000 { animation-duration: 1000ms; }

[condemil]

Also I see that --tw-duration variable is defined in duration-* utilities, but I don't see any benefit of having it in there. That's because @utilities layer have highest priority and this variable cannot be used within css that's defined in @theme, @base and @components layers.