tailwindcss-animation-delay

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:

# Using npm
npm install tailwindcss-animation-delay

# Using Yarn
yarn add tailwindcss-animation-delay

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

/** @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.

<svg class="animate-bounce animation-delay-300 w-6 h-6 ...">
  <!-- ... -->
</svg>

Negative values

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

<svg class="animate-bounce -animation-delay-600 w-6 h-6 ...">
  <!-- ... -->
</svg>

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:

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

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.

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