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;