0.0.1-5 • Published 2 years ago

tailwindcss-plugin-animation-delay v0.0.1-5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Tailwindcss animation-delay plugin

Tailwind CSS plugin, add animation-delay CSS property.

Installation

Install the plugin from npm:

# 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:

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

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

Normal

ClassProperties
animation-delay-noneanimation-delay: 0s;
animation-delay-25animation-delay: 25ms;
animation-delay-50animation-delay: 50ms;
animation-delay-75animation-delay: 75ms;
animation-delay-100animation-delay: 100ms;
animation-delay-150animation-delay: 150ms;
animation-delay-200animation-delay: 200ms;
animation-delay-300animation-delay: 300ms;
animation-delay-400animation-delay: 400ms;
animation-delay-500animation-delay: 500ms;
animation-delay-600animation-delay: 600ms;
animation-delay-700animation-delay: 700ms;
animation-delay-800animation-delay: 800ms;
animation-delay-900animation-delay: 900ms;
animation-delay-1000animation-delay: 1000ms;
animation-delay-1100animation-delay: 1100ms;
animation-delay-1200animation-delay: 1200ms;
animation-delay-1300animation-delay: 1300ms;
animation-delay-1400animation-delay: 1400ms;
animation-delay-1500animation-delay: 1500ms;
animation-delay-2000animation-delay: 2000ms;
animation-delay-3000animation-delay: 3000ms;
animation-delay-4000animation-delay: 4000ms;
animation-delay-5000animation-delay: 5000ms;
animation-delay-6000animation-delay: 6000ms;
animation-delay-7000animation-delay: 7000ms;
animation-delay-8000animation-delay: 8000ms;
animation-delay-9000animation-delay: 9000ms;

Negative

ClassProperties
-animation-delay-25animation-delay: -25ms;
-animation-delay-50animation-delay: -50ms;
-animation-delay-75animation-delay: -75ms;
-animation-delay-100animation-delay: -100ms;
-animation-delay-150animation-delay: -150ms;
-animation-delay-200animation-delay: -200ms;
-animation-delay-300animation-delay: -300ms;
-animation-delay-400animation-delay: -400ms;
-animation-delay-500animation-delay: -500ms;
-animation-delay-600animation-delay: -600ms;
-animation-delay-700animation-delay: -700ms;
-animation-delay-800animation-delay: -800ms;
-animation-delay-900animation-delay: -900ms;
-animation-delay-1000animation-delay: -1000ms;
-animation-delay-1100animation-delay: -1100ms;
-animation-delay-1200animation-delay: -1200ms;
-animation-delay-1300animation-delay: -1300ms;
-animation-delay-1400animation-delay: -1400ms;
-animation-delay-1500animation-delay: -1500ms;
-animation-delay-2000animation-delay: -2000ms;
-animation-delay-3000animation-delay: -3000ms;
-animation-delay-4000animation-delay: -4000ms;
-animation-delay-5000animation-delay: -5000ms;
-animation-delay-6000animation-delay: -6000ms;
-animation-delay-7000animation-delay: -7000ms;
-animation-delay-8000animation-delay: -8000ms;
-animation-delay-9000animation-delay: -9000ms;

Arbitrary values

<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:

// tailwind.config.js
module.exports = {
  theme: {
    animationDelay: {
      100: "100ms",
      200: "200ms",
      300: "300ms",
      400: "400ms",
    },
  },
  variants: {
    animationDelay: ["responsive", "hover"],
  },
};
tailwindtailwindcsstailwindcss-plugintailwindcss-animation-delaytailwind-animation-delaytailwindcss-plugin-animation-delayanimation-delayanimationdelay
@everything-registry/sub-chunk-2874@infinitebrahmanuniverse/nolb-tail
0.0.1-5

2 years ago

0.0.1-0

2 years ago

0.0.1

2 years ago