# jamiebuilds/tailwindcss-animate

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jamiebuilds-tailwindcss-animate).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

3,029 stars · 66 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jamiebuilds/tailwindcss-animate
- awesome-repositories: https://awesome-repositories.com/repository/jamiebuilds-tailwindcss-animate.md

## Description

This project is a plugin for Tailwind CSS that provides a declarative utility library for managing web interface animations. It functions as a motion framework, enabling developers to apply fluid entrance and exit effects to elements directly through utility classes.

The framework distinguishes itself by offering a comprehensive suite of motion controls that integrate with the Tailwind ecosystem. It supports granular configuration of animation properties, including timing, duration, delay, and iteration, while allowing for complex transformations like rotation, scaling, and opacity adjustments. By utilizing a plugin architecture, it injects custom keyframes and utility classes into the global stylesheet, ensuring consistent motion design across an entire interface.

Beyond basic transitions, the project includes built-in support for accessibility by automatically respecting user system preferences for reduced motion. It also supports arbitrary value parsing and CSS variable integration, allowing for precise, theme-based control over animation sequences without requiring extensive custom CSS.

## Tags

### User Interface & Experience

- [Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/animation-utilities.md) — Provides a declarative utility library for adding fluid entrance and exit animations to elements in styling frameworks.
- [Configurable Property Animators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties/pixijs-property-animators/configurable-property-animators.md) — Offers a declarative utility library for managing animation properties like timing, duration, and delay. ([source](https://github.com/jamiebuilds/tailwindcss-animate#readme))
- [Motion Preference Handlers](https://awesome-repositories.com/f/user-interface-experience/motion-preference-handlers.md) — Automatically adjusts or disables animations based on system-level reduced motion accessibility preferences.
- [Motion Accessibility Utilities](https://awesome-repositories.com/f/user-interface-experience/accessibility-standards/motion-accessibility-utilities.md) — Ensures accessible motion design by respecting user system preferences for reduced motion.
- [Animation Configuration](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration.md) — Provides standardized utility classes for configuring animation timing, duration, and iteration counts.
- [Animation Easing Functions](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-easing-functions.md) — Applies specific easing functions to control the acceleration and deceleration of motion. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-duration.md))
- [Start Delay Controllers](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/playback-lifecycle-controllers/animation-duration-controllers/start-delay-controllers.md) — Provides utility classes to define the delay before an animation sequence begins. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-delay.md))
- [Animation Direction Controls](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-controls/animation-direction-controls.md) — Enables control over the playback direction of animations using CSS properties. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-direction.md))
- [Iteration Count Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-controls/iteration-count-utilities.md) — Allows setting the number of times an animation plays or enabling infinite loops. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-iteration-count.md))
- [Fill Mode Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-fill-modes/fill-mode-utilities.md) — Provides utility classes to manage how styles persist before or after an animation sequence. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-fill-mode.md))
- [CSS Keyframe Declarations](https://awesome-repositories.com/f/user-interface-experience/css-keyframe-declarations.md) — Generates and injects reusable CSS keyframe rules into the stylesheet for consistent animation sequences.
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Provides single-purpose utility classes for managing layout and animation states within the styling framework.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Enables overriding animation properties like duration and easing through centralized CSS variable design tokens.
- [Exit Opacity Utilities](https://awesome-repositories.com/f/user-interface-experience/splash-screen-customizations/exit-animations/exit-opacity-utilities.md) — Defines the final transparency level for elements during exit animations. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-opacity.md))
- [Exit Rotation Utilities](https://awesome-repositories.com/f/user-interface-experience/splash-screen-customizations/exit-animations/exit-rotation-utilities.md) — Allows configuring the final rotation angle of an element as it exits the viewport. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-rotate.md))
- [Exit Scaling Utilities](https://awesome-repositories.com/f/user-interface-experience/splash-screen-customizations/exit-animations/exit-scaling-utilities.md) — Applies scaling transformations to elements as they animate out of the viewport. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-scale.md))
- [Exit Translation Utilities](https://awesome-repositories.com/f/user-interface-experience/splash-screen-customizations/exit-animations/exit-translation-utilities.md) — Provides directional translation utilities to move elements to specific positions as they leave the viewport. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-translate.md))
- [CSS Utility Libraries](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries.md) — Offers a collection of declarative classes for managing animation properties within web interfaces.

### Web Development

- [Utility-First Plugin Extensions](https://awesome-repositories.com/f/web-development/build-tooling/plugin-ecosystems/css-plugin-frameworks/utility-first-plugin-extensions.md) — Extends the styling engine by injecting custom animation utilities and keyframes at build time.
- [Motion Design Frameworks](https://awesome-repositories.com/f/web-development/frontend-development-resources/motion-design-frameworks.md) — Enables the creation of engaging user experiences through controlled transitions, rotations, and scaling effects.

### Part of an Awesome List

- [Predefined Animation Effects](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-effects/predefined-animation-effects.md) — Includes specialized utility classes for fading, spinning, zooming, and sliding entrance effects. ([source](https://github.com/jamiebuilds/tailwindcss-animate#readme))
- [Entrance Scaling Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-effects/predefined-animation-effects/entrance-scaling-utilities.md) — Provides utilities to scale elements as they appear on the page using predefined or custom values. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-scale.md))
- [Entrance Rotation Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-effects/predefined-animation-effects/rotation-based-transitions/entrance-rotation-utilities.md) — Allows rotational transformations on elements as they enter the viewport using utility classes. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-rotate.md))
- [Accessibility Motion Overrides](https://awesome-repositories.com/f/awesome-lists/devtools/animations-and-motion/accessibility-motion-overrides.md) — Automatically respects user system preferences for reduced motion to ensure accessibility. ([source](https://github.com/jamiebuilds/tailwindcss-animate#readme))
- [Declarative Transition Animations](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions/ui-transition-animations/declarative-transition-animations.md) — Provides declarative configuration for the speed and rhythm of element transitions. ([source](https://github.com/jamiebuilds/tailwindcss-animate/tree/main/docs))

### Development Tools & Productivity

- [CSS Value Injections](https://awesome-repositories.com/f/development-tools-productivity/command-execution/arbitrary/css-value-injections.md) — Supports arbitrary value parsing to generate one-off CSS rules for animation parameters.

### Graphics & Multimedia

- [UI Motion Frameworks](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/ui-motion-frameworks.md) — Provides tools for applying fluid motion effects that respect system-level accessibility settings.
- [Animation State Controllers](https://awesome-repositories.com/f/graphics-multimedia/path-animation-utilities/animation-state-controllers.md) — Provides utilities to toggle animation execution between running and paused states. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-play-state.md))

### System Administration & Monitoring

- [Entrance Opacity Utilities](https://awesome-repositories.com/f/system-administration-monitoring/agent-management-planes/plane-hierarchy-management/opacity-animations/entrance-opacity-utilities.md) — Enables setting the starting transparency level for elements as they animate into view. ([source](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-opacity.md))