tailwindcss-animation-delay

1.2.0 • Public • Published

tailwindcss-animation-delay

Tailwind CSS plugin, add animation-delay CSS property.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-animation-delay

# Using Yarn
yarn add tailwindcss-animation-delay

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

/** @type {import('tailwindcss').Config} */
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.

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    animationDelay: {
      100: "100ms",
      200: "200ms",
      300: "300ms",
      400: "400ms",
    },
  },
  variants: {
    animationDelay: ["responsive", "hover"],
  },
}

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.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animationDelay: {
        120: "120ms",
        250: "250ms",
        350: "350ms",
        450: "450ms",
      },
    },
  },
}

Package Sidebar

Install

npm i tailwindcss-animation-delay

Weekly Downloads

23,595

Version

1.2.0

License

MIT

Unpacked Size

6.04 kB

Total Files

5

Last publish

Collaborators

  • burnworks