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:

``sh

Using npm

npm install tailwindcss-animation-delay

Using Yarn

yarn add tailwindcss-animation-delay
`

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

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-animation-delay"),
// ...
],
}
`

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.

`html



`

$3

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

`html



`


| 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:

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
theme: {
animationDelay: {
100: "100ms",
200: "200ms",
300: "300ms",
400: "400ms",
"-3000": "-3000ms",
"-7000": "-7000ms",
},
},
variants: {
animationDelay: ["focus"],
},
}
`

$3

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.

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
theme: {
extend: {
animationDelay: {
120: "120ms",
250: "250ms",
350: "350ms",
450: "450ms",
"-3500": "-3500ms",
"-7500": "-7500ms",
},
},
},
}
``