How to give custom animation-duration in tailwind

[abhi40308]

Hello folks 👋 Love the new tailwind release. I have a question around how to give custom animation duration when the animation itself is given as a one off value. This is expanding on the general discussion i raised earlier.

I am trying an animation like so:

<div className="animate-[fadeIn_300ms_ease-out_900ms_forwards]" />

I've defined fadeIn keyframes in tailwind.config.js (could be found here), and to achieve 300ms and 900ms i'm extending the tailwidn.config.js like so:

module.exports = {
  theme: {
    extend: {
      animationDuration: {
        '300ms': '300ms',
        '900ms': '900ms',
      },
      animationDelay: {
        '300ms': '300ms',
        '900ms': '900ms',
      },
    }
  }
}

This works, but these are one-off values which i don't want to include in my tailwind.config.js. Is there a better solution, something like:

<div className="animate-[fadeIn_[300ms]_ease-out_[900ms]_forwards]" />

which will allow me to remove one-off's from my config, and keep the config truly for the theme related stuff?

[wongjn]

You can keep your original class name with the arbitrary values and simply remove the extended animationDuration and animationDelay configurations – the values used in the arbitrary class name are already contained because they are in the class name:

<div className="animate-[fadeIn_300ms_ease-out_900ms_forwards]" />

Results in:

.animate-\[fadeIn_300ms_ease-out_900ms_forwards\] {
  animation: fadeIn 300ms ease-out 900ms forwards;
}

Proof with this Tailwind Play with a blank config.

[abhi40308]

this works, thanks a lot!

[herzaso]

Although it's an old question, I don't seem to find a way to actually solve the question in the title.
Let's say that I want to use the built in animation-spin and just provide it with a different duration.
Providing animation-duration-500 works, but I want to add to the list of predefined durations (let's say 2000ms).
How do I do that?

[Medayoubadri]

like this animate-[spin_2000ms_linear_infinite] if you want to run it infinitely.
if you want more control you can change everything inside the square brackets.
from the animation name/type, duration, timing-function, iteration-count...

you can also go crazy if you want and add multiple animation:
animate-[spin_2s_linear_infinite,ping_5s_linear_alternate_infinite]

[searls]

This might be helpful for folks who have a canned animation in their configuration like this:

      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '33%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
      },
      animation: {
        fadeIn: 'fadeIn 2s ease-in-out'
      }

Maybe I need it to be 2 seconds in most places, but that's really long. And all tailwind (3.4) generates for you is a single animate-fadeIn class.

Well, thanks to arbitrary variants, even though tailwind doesn't currently provide an animation-duration utility class, you can still use a class to override the animation duration like this:

<div class="animation-fadeIn [animation-duration:_.5s]">…</div>

And the 0.5s will win out over the 2s

[dumptyd]

{
  plugins: [
    // animation duration with arbitrary value support
    plugin(function ({ matchUtilities, theme }) {
      const durations = theme('transitionDuration'); // or define your own presets
      matchUtilities(
        {
          'animation-duration': (value) => ({
            'animation-duration': value,
          }),
        },
        { values: durations, type: 'any' },
      );
    }),
  ]
}

<div class="tw-animation-duration-300"></div>
<div class="tw-animation-duration-[2500ms]"></div>