Tailwind Animations Plugin: 80+ CSS Animation Classes for Developers

Awesome Tailwind Animations is a plugin for Tailwind CSS that provides a collection of 80+ pre-defined animations that you can directly apply to your HTML elements.

This allows you to implement various animation effects using only Tailwind CSS utility classes without writing custom CSS keyframes.

Features

Use Cases

• Landing Page Interactions – Add eye-catching entrance animations to hero sections, feature cards, and call-to-action buttons to increase user engagement
• Loading States – Implement pulsing, spinning, or bouncing animations for loading indicators and skeleton screens during data fetching
• Modal and Dropdown Animations – Create smooth slide-in, fade-in, or zoom-in effects for overlays, modals, and dropdown menus
• Product Showcases – Apply hover animations like scale, rotate, or wobble effects to product images and interactive elements
• Scroll-based Storytelling – Use view timeline animations to reveal content progressively as users scroll through long-form articles or portfolios

How To Use It

1. Install Awesome Tailwind Animations.

# Yarn
$ yarn add @midudev/tailwind-animations

# NPM
$ npm install @midudev/tailwind-animations

# PNPM
$ pnpm install @midudev/tailwind-animations

2. Add the plugin to your Tailwind CSS configuration:

// tailwind.config.mjs
import animations from '@midudev/tailwind-animations'
export default {
  // rest of the options
  plugins: [
    animations
  ],
}

3. Apply animations directly to HTML elements using utility classes. All available animations:

• blurred-fade-in
• fade-in
• fade-out
• slide-in-top
• slide-in-bottom
• slide-out-top
• slide-out-bottom
• zoom-in
• zoom-out
• rotate-90
• rotate-180
• rotate-360
• flip-horizontal
• flip-vertical
• bouncing
• swing
• wobble
• pulsing
• shake
• tada
• jump
• hang
• roll-in
• roll-out
• float
• sink
• flash
• jiggle
• rubber-band
• scale
• slide-in-left
• slide-in-right
• slide-out-left
• slide-out-right
• spin-clockwise
• spin-counter-clockwise
• flip-x
• flip-y
• blink
• pop
• expand-horizontally
• contract-horizontally
• expand-vertically
• contract-vertically
• fade-in-up
• fade-in-down
• fade-in-left
• fade-in-right
• fade-out-up
• fade-out-down
• fade-out-left
• fade-out-right
• sway
• flip-in-x
• flip-in-y
• flip-out-x
• flip-out-y
• rotate-in
• rotate-out
• slide-rotate-in
• slide-rotate-out
• heartbeat
• horizontal-vibration
• rotational-wave
• skew
• skew-right
• vertical-bounce
• horizontal-bounce
• tilt
• squeeze
• slide-up-fade
• bounce-fade-in
• swing-drop-in
• pulse-fade-in
• impulse-rotation-right
• impulse-rotation-left
• dancing
• pulse
• jelly

<div class="animate-fade-in">
  Basic Anmation
</div>
<div class="animate-pulse-fade-in animate-delay-300 animate-duration-slow">
  With Delay & Duration
</div>

4. The view-animate utility allows animations to trigger based on an element’s visibility in the viewport. You can define a custom timeline name.

This example demonstrates an element that zooms in when it is 10% into the viewport and the animation completes when it is 25% contained within the viewport.

<div class="w-72 h-52 m-[0_auto] bg-[deeppink] view-animate-[--subjectReveal] animate-zoom-in animate-range-[entry_10%_contain_25%]">
  This element animates as it enters the viewport.
</div>

Related Resources

• Tailwind CSS – The utility-first CSS framework that this plugin extends (https://tailwindcss.com)
• Framer Motion – React animation library for more complex JavaScript-based animations (https://www.framer.com/motion)
• Animate.css – Cross-browser CSS animation library with similar pre-built effects (https://animate.style)
• GSAP – Professional-grade JavaScript animation library for advanced animation sequences (https://greensock.com/gsap)