tailwindcss-animation weekly downloads statistics

tailwindcss-animation

TailwindCSS plugin with various animation utilities.

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

Install

Configuration

tailwind.config.js

Extended configuration

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

tailwind.config.js

Usage

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