Package Exports

tailwindcss-animation
tailwindcss-animation/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;