@halvaradop/tailwindcss-animations

A utility package for Tailwind CSS v4 providing predefined animation classes, keyframes, and advanced properties not natively supported by Tailwind. Includes experimental features like "animation-iteration-count", "animation-fill-mode", "animation-range", and "animation-timeline", plus a suite of timing functions with the "ease" prefix.

> Built with the latest Tailwind standards using @custom-variant and @utility from tailwindcss@v4.

Installation

Before using this package, ensure Tailwind CSS v4 is installed and configured. If needed, refer to the official Tailwind installation guide.

Once ready, install the package:

npm install -D @halvaradop/tailwindcss-animations
# or
pnpm add -D @halvaradop/tailwindcss-animations

Configuration

To use the utility classes from this package, add them to your Tailwind CSS setup as follows:

Make sure Tailwind CSS is imported in your main .css file using the @import directive.
Import the utility CSS file from this package after Tailwind.

Example:

@import "tailwindcss";
@import "../node_modules/@halvaradop/tailwindcss-animations/dist/plugin.css";

This setup ensures that the utility classes are available throughout your project.

Usage

This utility package offers a variety of class enhancements, such as:

animate-{animation-name}
animation-count-{count}
animation-fill-mode-{mode}
animation-range-{range}
animation-timeline-{timeline}
ease-{timing-function-name}

Example

<div>
    <span class="size-10 block rounded hover:animate-pulse"></span>
</div>

Customization

Custom Values

Extend animation utilities using the @theme directive in your CSS:

@theme {
  --animation-count-5: 5;
  --animation-range-xs: normal 25%;
  --animation-timeline-axis: scroll(scroller axis);
  --animation-fill-mode-revert: revert;
  --ease-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

Use these variables to extend and customize your animation utilities.

Key Features

Predefined animation classes for common use cases
Customizable animation values via @theme
Support for advanced properties like animation-timeline and animation-range - Seamless Tailwind v4 integration

Breaking Changes

As of the latest release:

The plugin export has been removed.
Utilities are now provided directly through a compiled CSS file for simpler integration.

Contribute

Get Involved

Have questions or ideas? Visit our community to connect, share, or contribute.

Join the Community →

@halvaradop/tailwindcss-animations@halvaradop/tailwindcss-animations