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 duration-{amount} utilities set the animation-duration property on an element, controlling how long a single animation cycle takes to complete. You can combine these with animate-in, animate-out, or any of Tailwind’s built-in animate-* classes to fine-tune animation speed.

​
Reference

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

​
Basic usage

​
Changing animation duration

Apply a duration-{amount} class alongside any animation class to control how fast or slow the animation plays. 
<button class="animate-bounce duration-150 ...">Button A</button>
<button class="animate-bounce duration-300 ...">Button B</button>
<button class="animate-bounce duration-700 ...">Button C</button>

​
Applying conditionally

​
Hover, focus, and other states

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

​
Breakpoints and media queries

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

​
Customization

​
Extending the theme

Add custom duration values by extending animationDuration in your tailwind.config.js file. 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animationDuration: {
        "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="duration-[2s]">
  <!-- ... -->
</div>
Learn more in the arbitrary values documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us