tailwindcss-animation

TailwindCSS plugin with various animation utilities.

• animationDelay
• animationDuration
• animationIteration
• animationTiming
• animationDirection
• animationFillMode
• animationPlayState

Install

npm install tailwindcss-animation
yarn add tailwindcss-animation

Configuration

tailwind.config.js

{
    plugins: [
        require('tailwindcss-animation'),
    ],
}

Extended configuration

Extending the properties is possible but not required due support for arbitrary values.

tailwind.config.js

{
    theme: {
        extend: {
            animationDelay: {
                2000: '2000ms',
            },
            animationDuration: {
                2000: '2000ms',
            },
            animationIteration: {
                10: '10',
            },
            animationTiming: {
                cubic: 'cubic-bezier(0, 0, 0.2, 1)',
            },
        },
    },
}

Usage

<div class="w-10 h-10 bg-blue-500 animate-spin timing-ease-in-out-quint animation-delay-100 animation-duration-200 fillmode-forwards playstate-running direction-alternate lg:animation-duration-[1200ms]"></div>

Animation delay

Long variant: animation-delay-%
Short variant: n/a

| Class | Properties | | ------------------------ | ------------------------ | | animation-delay-none | animation-delay: 0ms; | | animation-delay-100 | animation-delay: 100ms; | | 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-[1500ms] | animation-delay: 1500ms; | | animation-delay-[2s] | animation-delay: 2s; |

Animation duration

Long variant: animation-duration-%
Short variant: n/a

| Class | Properties | | --------------------------- | --------------------------- | | animation-duration-none | animation-duration: 0ms; | | animation-duration-100 | animation-duration: 100ms; | | animation-duration-200 | animation-duration: 200ms; | | animation-duration-300 | animation-duration: 300ms; | | animation-duration-400 | animation-duration: 400ms; | | animation-duration-500 | animation-duration: 500ms; | | animation-duration-600 | animation-duration: 600ms; | | animation-duration-700 | animation-duration: 700ms; | | animation-duration-800 | animation-duration: 800ms; | | animation-duration-900 | animation-duration: 900ms; | | animation-duration-1000 | animation-duration: 1000ms; | | animation-duration-[1500ms] | animation-duration: 1500ms; | | animation-duration-[2s] | animation-duration: 2s; |

Animation iteration count

Long variant: animation-iteration-%
Short variant: iterate-%

| Class | Properties | | ---------------- | ------------------------------------ | | iterate-none | animation-iteration-count: 0; | | iterate-1 | animation-iteration-count: 1; | | iterate-2 | animation-iteration-count: 2; | | iterate-[10] | animation-iteration-count: 10; | | iterate-infinite | animation-iteration-count: infinite; |

Animation timing function

Long variant: animation-timing-%
Short variant: timing-%

| Class | Properties | | ------------------------------------ | ----------------------------------------------------------- | | timing-linear | animation-timing-function: linear; | | timing-ease | animation-timing-function: ease; | | timing-ease-in | animation-timing-function: ease-in; | | timing-ease-out | animation-timing-function: ease-out; | | timing-ease-in-out | animation-timing-function: ease-in-out; | | timing-step-start | animation-timing-function: step-start; | | timing-step-end | animation-timing-function: step-end; | | timing-ease-in-out-back | animation-timing-function: cubic-bezier(.68,-.55,.265,1.55) | | timing-[cubic-bezier(0.1,0.7,1,0.1)] | animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); |

Animation direction

Long variant: animation-direction-%
Short variant: direction-%

| Class | Properties | | --------------------------- | --------------------------------------- | | direction-normal | animation-direction: normal; | | direction-reverse | animation-direction: reverse; | | direction-alternate | animation-direction: alternate; | | direction-alternate-reverse | animation-direction: alternate-reverse; |

Animation fill mode

Long variant: animation-fill-%
Short variant: fillmode-%

| Class | Properties | | ------------------------- | ------------------------------------ | | fillmode-none | animation-fill-mode: none; | | fillmode-forwards | animation-fill-mode: forwards; | | fillmode-backwards | animation-fill-mode: backwards; | | fillmode-both | animation-fill-mode: both; | | fillmode-[none,backwards] | animation-fill-mode: none, backwards |

Animation play state

Long variant: animation-state-%
Short variant: playstate-%

| Class | Properties | | ------------------ | ------------------------------ | | playstate-paused | animation-play-state: paused; | | playstate-running | animation-play-state: running; |