@graphprotocol/tailwindcss-animate

Composable animation utilities for Tailwind CSS 4.

Overview

This plugin allows you to animate various properties (opacity, colors, transform, etc.) with up to 3 keyframes, using only utility classes.

Setup

Install the package via pnpm, npm, or yarn:

pnpm add @graphprotocol/tailwindcss-animate

Then import it in your main CSS file:

  @import 'tailwindcss';
+ @import '@graphprotocol/tailwindcss-animate';

Usage

Basic Example

<div class="animate animate-opacity-from-0">Fade In</div>

Multiple Properties

<div class="animate animate-translate-y-from-2 animate-opacity-from-0">Fade In & Slide Up</div>

Multiple Keyframes

<div class="animate animate-scale-from-0 animate-scale-via-110 animate-scale-to-100">
  Scale & Bounce
</div>

Customizations

Animations run once by default. You can make them repeat indefinitely with animate-infinite, or a specific number of times with the animate-{iterations} utilities (for example, animate-3).

The default duration is 1s, and the default timing function is the same one that Tailwind uses for transitions: cubic-bezier(0.4, 0, 0.2, 1). You can customize these defaults with the --default-animation-duration and --default-animation-timing-function theme variables, or override them per element using the animate-duration-* and animate-ease-* utilities:

<div class="animate-opacity-from-0 animate-duration-500 animate-ease-linear">
  Custom Duration & Easing
</div>

Other available utilities include animate-delay-*, animate-fill-*, animate-{normal|reverse|alternate|alternate-reverse}, and animate-{play|pause}.

License

MIT