tailwindcss-animation-delay

Tailwind CSS plugin, add animation-delay CSS property.

[!NOTE] Version 2.0.0 now supports negative values.

Installation

Install the plugin from npm:

1# Using npm
2npm install tailwindcss-animation-delay
3
4# Using Yarn
5yarn add tailwindcss-animation-delay

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

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  theme: {
4    // ...
5  },
6  plugins: [
7    require("tailwindcss-animation-delay"),
8    // ...
9  ],
10}

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.

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

Negative values

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

1<svg class="animate-bounce -animation-delay-600 w-6 h-6 ...">
2  <!-- ... -->
3</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:

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  theme: {
4    animationDelay: {
5      100: "100ms",
6      200: "200ms",
7      300: "300ms",
8      400: "400ms",
9      "-3000": "-3000ms",
10      "-7000": "-7000ms",
11    },
12  },
13  variants: {
14    animationDelay: ["focus"],
15  },
16}

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.

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  theme: {
4    extend: {
5      animationDelay: {
6        120: "120ms",
7        250: "250ms",
8        350: "350ms",
9        450: "450ms",
10        "-3500": "-3500ms",
11        "-7500": "-7500ms",
12      },
13    },
14  },
15}