Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jamiebuilds/tailwindcss-animate/llms.txt

Use this file to discover all available pages before exploring further.

The delay-{amount} utilities set the animation-delay property on an element, controlling how long the browser waits before starting the animation. This is especially useful for staggering a sequence of elements so they animate in one after another rather than all at once.

​
Reference

ClassProperties
delay-75animation-delay: 75ms;
delay-100animation-delay: 100ms;
delay-150animation-delay: 150ms;
delay-200animation-delay: 200ms;
delay-300animation-delay: 300ms;
delay-500animation-delay: 500ms;
delay-700animation-delay: 700ms;
delay-1000animation-delay: 1000ms;
These classes reuse the same names as Tailwind’s transition-delay utilities, since both are sourced from the transitionDelay theme key. This may change in a future release if it causes friction.

​
Basic usage

​
Staggering animations

Apply increasing delay-{amount} values to sibling elements to create a staggered animation sequence. 
<button class="animate-bounce delay-150 duration-300 ...">Button A</button>
<button class="animate-bounce delay-300 duration-300 ...">Button B</button>
<button class="animate-bounce delay-700 duration-300 ...">Button C</button>

​
Applying conditionally

​
Hover, focus, and other states

Use variant modifiers to apply a delay only in a specific state. For example, hover:delay-0 removes the delay on hover. 
<div class="animate-bounce duration-300 delay-150 hover:delay-0">
  <!-- ... -->
</div>
For a full list of available state modifiers, see the Hover, Focus, & Other States documentation.

​
Breakpoints and media queries

Prefix any delay utility with a responsive breakpoint to apply it only at that screen size and above. 
<div class="animate-bounce duration-300 delay-150 md:delay-0">
  <!-- ... -->
</div>
Learn more in the Responsive Design and Dark Mode documentation.

​
Customization

​
Extending the theme

Add custom delay values by extending animationDelay in your tailwind.config.js file. 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animationDelay: {
        "2s": "2s",
      },
    },
  },
}
Learn more in the theme customization documentation.

​
Arbitrary values

For one-off values that don’t belong in your theme, use square-bracket notation to generate the property on the fly. 
<div class="delay-[2s]">
  <!-- ... -->
</div>
Learn more in the arbitrary values documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us