tailwindcss-animation-delay weekly downloads statistics

tailwindcss-animation-delay

Tailwind CSS plugin, add animation-delay CSS property.

[!NOTE] With Tailwind CSS v4, you can now define custom properties directly in your CSS file without using any plugins. If you’re working with v4.0 or later, please include the contents of tailwindcss-v4.css.

Installation

Install the plugin from npm:

Then add the plugin to your tailwind.config.js file:

Usage

animation-delay-{n} class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

Negative values

To use a negative animation-delay value, prefix the class name with a dash to convert it to a negative value.

| Class | Properties |

| animation-delay-none | animation-delay: 0s; | | animation-delay-75 | animation-delay: 75ms; | | animation-delay-100 | animation-delay: 100ms; | | animation-delay-150 | animation-delay: 150ms; | | animation-delay-200 | animation-delay: 200ms; | | animation-delay-300 | animation-delay: 300ms; | | animation-delay-400 | animation-delay: 400ms; | | animation-delay-500 | animation-delay: 500ms; | | animation-delay-600 | animation-delay: 600ms; | | animation-delay-700 | animation-delay: 700ms; | | animation-delay-800 | animation-delay: 800ms; | | animation-delay-900 | animation-delay: 900ms; | | animation-delay-1000 | animation-delay: 1000ms; | | animation-delay-1100 | animation-delay: 1100ms; | | animation-delay-1200 | animation-delay: 1200ms; | | animation-delay-1300 | animation-delay: 1300ms; | | animation-delay-1400 | animation-delay: 1400ms; | | animation-delay-1500 | animation-delay: 1500ms; | | animation-delay-2000 | animation-delay: 2000ms; | | animation-delay-3000 | animation-delay: 3000ms; | | animation-delay-4000 | animation-delay: 4000ms; | | animation-delay-5000 | animation-delay: 5000ms; | | animation-delay-6000 | animation-delay: 6000ms; | | animation-delay-7000 | animation-delay: 7000ms; | | animation-delay-8000 | animation-delay: 8000ms; | | animation-delay-9000 | animation-delay: 9000ms; | | -animation-delay-75 | animation-delay: -75ms; | | -animation-delay-100 | animation-delay: -100ms; | | -animation-delay-150 | animation-delay: -150ms; | | -animation-delay-200 | animation-delay: -200ms; | | -animation-delay-300 | animation-delay: -300ms; | | -animation-delay-400 | animation-delay: -400ms; | | -animation-delay-500 | animation-delay: -500ms; | | -animation-delay-600 | animation-delay: -600ms; | | -animation-delay-700 | animation-delay: -700ms; | | -animation-delay-800 | animation-delay: -800ms; | | -animation-delay-900 | animation-delay: -900ms; | | -animation-delay-1000 | animation-delay: -1000ms; | | -animation-delay-1100 | animation-delay: -1100ms; | | -animation-delay-1200 | animation-delay: -1200ms; | | -animation-delay-1300 | animation-delay: -1300ms; | | -animation-delay-1400 | animation-delay: -1400ms; | | -animation-delay-1500 | animation-delay: -1500ms; | | -animation-delay-2000 | animation-delay: -2000ms; | | -animation-delay-3000 | animation-delay: -3000ms; | | -animation-delay-4000 | animation-delay: -4000ms; | | -animation-delay-5000 | animation-delay: -5000ms; | | -animation-delay-6000 | animation-delay: -6000ms; | | -animation-delay-7000 | animation-delay: -7000ms; | | -animation-delay-8000 | animation-delay: -8000ms; | | -animation-delay-9000 | animation-delay: -9000ms; |

Configuration

You can configure which values and variants are generated by this plugin under the animationDelay key in your tailwind.config.js file:

Extending the default theme

If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key in your configuration file.

Description from the npm listing.