https://github.com/akbaruddin/tailwindcss-plugin-animation-delay
Tailwind CSS plugin, add animation-delay CSS property
https://github.com/akbaruddin/tailwindcss-plugin-animation-delay
animation animation-delay delay plugin tailwind tailwindcss tailwindcss-animation-delay tailwindcss-plugin tailwindcss-plugin-animation-delay
Last synced: 7 days ago
JSON representation
Tailwind CSS plugin, add animation-delay CSS property
- Host: GitHub
- URL: https://github.com/akbaruddin/tailwindcss-plugin-animation-delay
- Owner: akbaruddin
- License: mit
- Created: 2022-07-23T10:47:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T12:34:56.000Z (over 3 years ago)
- Last Synced: 2025-10-04T21:24:31.061Z (5 months ago)
- Topics: animation, animation-delay, delay, plugin, tailwind, tailwindcss, tailwindcss-animation-delay, tailwindcss-plugin, tailwindcss-plugin-animation-delay
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-plugin-animation-delay
- Size: 21.5 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
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
```
### 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
```
## 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"],
},
};
```