# tailwindcss-plugin-animation-delay

> Tailwind CSS plugin, add animation-delay CSS property

Latest version **0.0.1-5** (published 2022-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-plugin-animation-delay
pnpm add tailwindcss-plugin-animation-delay
yarn add tailwindcss-plugin-animation-delay
bun add tailwindcss-plugin-animation-delay
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-5 |
| Published | 2022-07-23 |
| First published | 2022-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | akbaruddin |
| Maintainers | akbarsv |
| Keywords | tailwind, tailwindcss, tailwindcss-plugin, tailwindcss-animation-delay, tailwind-animation-delay, tailwindcss-plugin-animation-delay, animation-delay, animation, delay |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-plugin-animation-delay
- Repository: https://github.com/akbaruddin/tailwindcss-plugin-animation-delay
- Homepage: https://github.com/akbaruddin/tailwindcss-plugin-animation-delay#readme
- Issues: https://github.com/akbaruddin/tailwindcss-plugin-animation-delay/issues
- npm.io page: https://npm.io/package/tailwindcss-plugin-animation-delay

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.0.1-5 (latest) — 2022-07-23
- 0.0.1-0 — 2022-07-23
- 0.0.1 — 2022-07-23

## README

# Tailwindcss `animation-delay` plugin

Tailwind CSS plugin, add `animation-delay` CSS property.

## Installation

Install the plugin from npm:

```sh
# Using npm
npm install tailwindcss-plugin-animation-delay

# Using Yarn
yarn add tailwindcss-plugin-animation-delay

# Using pnpm
pnpm install tailwindcss-plugin-animation-delay
```

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

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-plugin-animation-delay"),
    // ...
  ],
};
```

## Usage

`animation-delay-{n}` or `-animation-delay-{n}` or `animation-delay-[arbitrary_values]` 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>
```

### Normal

| Class                | Properties               |
| -------------------- | ------------------------ |
| animation-delay-none | animation-delay: 0s;     |
| animation-delay-25   | animation-delay: 25ms;   |
| animation-delay-50   | animation-delay: 50ms;   |
| 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; |

### Negative

| Class                 | Properties                |
| --------------------- | ------------------------- |
| -animation-delay-25   | animation-delay: -25ms;   |
| -animation-delay-50   | animation-delay: -50ms;   |
| -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; |

### Arbitrary values

```html
<svg class="animate-bounce animation-delay-[10s] w-6 h-6 ...">
  <!-- ... -->
</svg>
```

## 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"],
  },
};
```

---
_Source: https://npm.io/package/tailwindcss-plugin-animation-delay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._