tailwindcss-animation-delay

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

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

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

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

    Install

    npm i tailwindcss-animation-delay

    DownloadsWeekly Downloads

    11

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    5.79 kB

    Total Files

    5

    Last publish

    Collaborators

    • burnworks