tailwindcss-animation

TailwindCSS plugin with various animation utilities.

- animationDelay
- animationDuration
- animationIteration
- animationTiming
- animationDirection
- animationFillMode
- animationPlayState

Install

``shell
npm install tailwindcss-animation
yarn add tailwindcss-animation
`

Configuration

tailwind.config.js
`js
{
plugins: [
require('tailwindcss-animation'),
],
}
`

Extended configuration

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

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

Usage

`html



``

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