JSPM

@iscodex/tailwindcss-animate

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q55511F
  • License MIT

Extended animation utilities for Tailwind CSS v4

Package Exports

  • @iscodex/tailwindcss-animate
  • @iscodex/tailwindcss-animate/package.json

Readme

@iscodex/tailwindcss-animate

Extended animation utilities for Tailwind CSS v4. Modern, lightweight, and fully customizable animations built with CSS custom properties.

Features

  • Tailwind CSS v4 - Built with @utility and @theme syntax
  • Zero Configuration - Just import and start animating
  • Fully Customizable - Control duration, delay, timing, and more
  • CSS Custom Properties - Easy theming and dynamic control
  • Modular Architecture - Import only what you need

Installation

npm install @iscodex/tailwindcss-animate

Quick Start

Add the import to your CSS file:

@import "tailwindcss";
@import "@iscodex/tailwindcss-animate";

Start using animations:

<div class="animate-wiggle">Hello World!</div>

<button class="animate-bounce animate-infinite animate-duration-[2s]">
  Click me
</button>

Requirements

  • Tailwind CSS v4.0.0 or higher
  • Modern browser with CSS custom properties support

Available Animations

Attention Seekers

  • animate-flash - Flashing effect
  • animate-head-shake - Head shake movement
  • animate-heart-beat - Heart beating effect
  • animate-jelly - Jello wobble effect
  • animate-rubber-band - Rubber band stretch
  • animate-shake-x - Horizontal shake
  • animate-shake-y - Vertical shake
  • animate-swing - Pendulum swing
  • animate-tada - Celebration effect
  • animate-wiggle - Gentle rotation wiggle
  • animate-wobble - Side-to-side wobble
  • animate-float - Floating effect
  • animate-spin - Continuous rotation
  • animate-ping - Ping radar effect
  • animate-pulse - Pulse opacity
  • animate-bounce - Bouncing effect

Back Entrances

  • animate-back-in-down - Back entrance from top
  • animate-back-in-start - Back entrance from left
  • animate-back-in-end - Back entrance from right
  • animate-back-in-up - Back entrance from bottom

Back Exits

  • animate-back-out-down - Back exit to bottom
  • animate-back-out-start - Back exit to left
  • animate-back-out-end - Back exit to right
  • animate-back-out-up - Back exit to top

Bouncing Entrances

  • animate-bounce-in - Bounce entrance
  • animate-bounce-in-down - Bounce in from top
  • animate-bounce-in-start - Bounce in from left
  • animate-bounce-in-end - Bounce in from right
  • animate-bounce-in-up - Bounce in from bottom

Bouncing Exits

  • animate-bounce-out - Bounce exit
  • animate-bounce-out-down - Bounce out to bottom
  • animate-bounce-out-start - Bounce out to left
  • animate-bounce-out-end - Bounce out to right
  • animate-bounce-out-up - Bounce out to top

Dashing

  • animate-dash-in-start - Fast slide in from left
  • animate-dash-in-end - Fast slide in from right
  • animate-dash-out-start - Fast slide out to left
  • animate-dash-out-end - Fast slide out to right

Fading Entrances

  • animate-fade-in - Fade entrance
  • animate-fade-in-down - Fade in from top
  • animate-fade-in-start - Fade in from left
  • animate-fade-in-end - Fade in from right
  • animate-fade-in-up - Fade in from bottom

Fading Exits

  • animate-fade-out - Fade exit
  • animate-fade-out-down - Fade out to bottom
  • animate-fade-out-start - Fade out to left
  • animate-fade-out-end - Fade out to right
  • animate-fade-out-up - Fade out to top

Flippers

  • animate-flip - 3D flip effect
  • animate-flip-in-x - Flip in on X-axis
  • animate-flip-in-y - Flip in on Y-axis
  • animate-flip-out-x - Flip out on X-axis
  • animate-flip-out-y - Flip out on Y-axis

Rotating Entrances

  • animate-rotate-in - Rotating entrance
  • animate-rotate-in-down-start - Rotate in from top-left
  • animate-rotate-in-down-end - Rotate in from top-right
  • animate-rotate-in-up-start - Rotate in from bottom-left
  • animate-rotate-in-up-end - Rotate in from bottom-right

Rotating Exits

  • animate-rotate-out - Rotating exit
  • animate-rotate-out-down-start - Rotate out to bottom-left
  • animate-rotate-out-down-end - Rotate out to bottom-right
  • animate-rotate-out-up-start - Rotate out to top-left
  • animate-rotate-out-up-end - Rotate out to top-right

Sliding Entrances

  • animate-slide-in-down - Slide in from top
  • animate-slide-in-up - Slide in from bottom
  • animate-slide-in-start - Slide in from left
  • animate-slide-in-end - Slide in from right

Sliding Exits

  • animate-slide-out-down - Slide out to bottom
  • animate-slide-out-up - Slide out to top
  • animate-slide-out-start - Slide out to left
  • animate-slide-out-end - Slide out to right

Specials

  • animate-hinge - Door hinge effect
  • animate-jack-in - Pop-up like jack-in-the-box
  • animate-jack-out - Reverse jack-in effect
  • animate-roll-in - Rolling entrance
  • animate-roll-out - Rolling exit
  • animate-particle - Particle effect

Zooming Entrances

  • animate-zoom-in - Zoom entrance
  • animate-zoom-in-down - Zoom in from top
  • animate-zoom-in-up - Zoom in from bottom
  • animate-zoom-in-start - Zoom in from left
  • animate-zoom-in-end - Zoom in from right

Zooming Exits

  • animate-zoom-out - Zoom exit
  • animate-zoom-out-down - Zoom out to bottom
  • animate-zoom-out-up - Zoom out to top
  • animate-zoom-out-start - Zoom out to left
  • animate-zoom-out-end - Zoom out to right

Control Utilities

Duration

<div class="animate-wiggle animate-duration-[500ms]">Fast wiggle</div>
<div class="animate-bounce animate-duration-[2s]">Slow bounce</div>

Delay

<div class="animate-fade-in animate-delay-[1s]">Delayed entrance</div>

Iteration Count

<div class="animate-pulse animate-infinite">Never stops</div>
<div class="animate-bounce animate-twice">Bounce twice</div>

Direction

<div class="animate-spin animate-reverse">Reverse spin</div>
<div class="animate-wiggle animate-alternate animate-infinite">
  Back and forth
</div>

Fill Mode

<div class="animate-fade-in animate-fill-both">Maintains final state</div>

Timing Functions

<div class="animate-bounce animate-ease-in-out">Smooth bounce</div>

CSS Custom Properties

Customize animations globally using CSS custom properties:

:root {
  --default-animation-duration: 0.5s;
  --default-animation-delay: 0s;
  --default-animation-timing-function: ease-in-out;
}

/* Theme-specific customization */
.dark {
  --default-animation-duration: 0.8s;
}

Advanced Usage

Hover Animations

<button class="hover:animate-wiggle hover:animate-infinite">
  Hover to wiggle
</button>

Responsive Animations

<div class="animate-bounce md:animate-fade-in lg:animate-none">
  Responsive animation
</div>

Custom Duration with Arbitrary Values

<div class="animate-spin animate-duration-[3.5s]">Custom timing</div>

License

MIT License - see LICENSE file for details.

Changelog

See CHANGELOG for version history.

Made with ❤️ by @alckordev