Animations Plugin for Tailwind CSS
Installation
npm install tailwindcss-animations
Usage
// tailwind.config.jsmoduleexports = theme: animations: // defaults to {}; the following are examples 'spin': from: transform: 'rotate(0deg)' to: transform: 'rotate(360deg)' 'jump': '0%': transform: 'translateY(0%)' '50%': transform: 'translateY(-100%)' '100%': transform: 'translateY(0%)' animationDuration: // defaults to these values 'default': '1s' '0s': '0s' '1s': '1s' '2s': '2s' '3s': '3s' '4s': '4s' '5s': '5s' animationTimingFunction: // defaults to these values 'default': 'ease' 'linear': 'linear' 'ease': 'ease' 'ease-in': 'ease-in' 'ease-out': 'ease-out' 'ease-in-out': 'ease-in-out' animationDelay: // defaults to these values 'default': '0s' '0s': '0s' '1s': '1s' '2s': '2s' '3s': '3s' '4s': '4s' '5s': '5s' animationIterationCount: // defaults to these values 'default': 'infinite' 'once': '1' 'infinite': 'infinite' animationDirection: // defaults to these values 'default': 'normal' 'normal': 'normal' 'reverse': 'reverse' 'alternate': 'alternate' 'alternate-reverse': 'alternate-reverse' animationFillMode: // defaults to these values 'default': 'none' 'none': 'none' 'forwards': 'forwards' 'backwards': 'backwards' 'both': 'both' animationPlayState: // defaults to these values 'running': 'running' 'paused': 'paused' variants: // all the following default to ['responsive'] animations: 'responsive' animationDuration: 'responsive' animationTimingFunction: 'responsive' animationDelay: 'responsive' animationIterationCount: 'responsive' animationDirection: 'responsive' animationFillMode: 'responsive' animationPlayState: 'responsive' plugins: ;
The above configuration would generate the following CSS:
/* @tailwind base */ /* base styles for the default animation duration, timing function, delay, iteration count, direction, and fill mode (when they differ from the CSS defaults) */ /* configurable with the "animations" theme object */@}@ 50% 100% } /* @tailwind utilities */ /* configurable with the "animationDuration" theme object */ /* configurable with the "animationTimingFunction" theme object */ /* configurable with the "animationDelay" theme object */ /* configurable with the "animationIterationCount" theme object */ /* configurable with the "animationDirection" theme object */ /* configurable with the "animationFillMode" theme object */ /* configurable with the "animationPlayState" theme object */
Note: The animationDuration
, animationTimingFunction
, animationDelay
, animationIterationCount
, animationDirection
, and animationFillMode
theme objects accept a default
key that doesn’t generate any class; it is used to define a custom property on all elements and pseudo-elements (*, *::before, *::after
) if the value differs from the CSS-defined default. These custom properties are then used to set actual properties on elements that have a animation-[name]
class, so that you don’t have to specify the same classes every time.