# tailwindcss-animation-delay

Tailwind CSS plugin, add animation-delay CSS property.

## 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
// tailwind.config.js
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
<svg class="animate-bounce animation-delay-300 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; |

## Configuration

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

```js
// tailwind.config.js
module.exports = {
  theme: {
    animationDelay: {
      100: "100ms",
      200: "200ms",
      300: "300ms",
      400: "400ms",
    },
  },
  variants: {
    animationDelay: ["responsive", "hover"],
  },
};
```