tailwindcss-animations

Tailwind CSS Animations & Transitions Built-in Animations Spin

Continuous rotation for loading indicators:

Ping

Radar-style pulse for notifications:

Pulse

Subtle fade for skeleton loaders:

Bounce

Attention-grabbing vertical bounce:

Transitions Transition Properties Class CSS Property transition-none None transition-all All properties transition Common properties transition-colors Colors only transition-opacity Opacity only transition-shadow Shadow only transition-transform Transform only Transition Duration Class Duration duration-75 75ms duration-100 100ms duration-150 150ms duration-200 200ms duration-300 300ms duration-500 500ms duration-700 700ms duration-1000 1000ms Transition Timing Functions Class Easing ease-linear Linear ease-in Accelerate ease-out Decelerate ease-in-out Accelerate then decelerate Transition Delay Class Delay delay-75 75ms delay-100 100ms delay-150 150ms delay-200 200ms delay-300 300ms delay-500 500ms Basic Transition Examples

Hover me

Full transition

Transform Utilities Scale

Rotate

Translate

Skew

Transform Origin

Custom Animations (v4) Define in @theme @theme { / Custom keyframes / --animate-fade-in: fade-in 0.5s ease-out; --animate-slide-up: slide-up 0.3s ease-out; --animate-shake: shake 0.5s ease-in-out; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

Usage

Custom Easing @theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

Accessibility: Reduced Motion motion-safe / motion-reduce

Accessible button

Reduced Motion Pattern / Apply globally / @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

Common Animation Patterns Hover Card Lift

Button Press Effect Click me

Loading Dots

Fade In on Scroll (with JS)

// Intersection Observer to trigger animation const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.remove('opacity-0', 'translate-y-4') } }) })

document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el))

Skeleton Loader

Hamburger to X Animation

Transition on Enter/Leave (with JS)

For complex enter/leave transitions, use a library like Headless UI:

import { Transition } from '@headlessui/react'

function Modal({ isOpen, children }) { return ( {children} ) }

Performance Tips 1. Prefer GPU-Accelerated Properties