--- name: tailwindcss-animations description: Tailwind CSS animations and transitions including built-in utilities and custom animation patterns --- # Tailwind CSS Animations & Transitions ## Built-in Animations ### Spin Continuous rotation for loading indicators: ```html ``` ### Ping Radar-style pulse for notifications: ```html ``` ### Pulse Subtle fade for skeleton loaders: ```html
``` ### Bounce Attention-grabbing vertical bounce: ```html ``` ## 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 ```html
Card
Fade
``` ## Transform Utilities ### Scale ```html
Scale up
Scale down
Horizontal
Vertical
``` ### Rotate ```html
Rotate right
Rotate left
Flip
``` ### Translate ```html
Move right
Move up
``` ### Skew ```html
Skew horizontal
Skew vertical
``` ### Transform Origin ```html
Center (default)
Top left
Bottom right
``` ## Custom Animations (v4) ### Define in @theme ```css @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 ```html
Fades in
Slides up
Shakes on error
``` ### Custom Easing ```css @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); } ``` ```html
Bouncy scale
``` ## Accessibility: Reduced Motion ### motion-safe / motion-reduce ```html
Respects preferences
``` ### Reduced Motion Pattern ```css /* 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 ```html
Card content
``` ### Button Press Effect ```html ``` ### Loading Dots ```html
``` ### Fade In on Scroll (with JS) ```html
Content that fades in
``` ```javascript // 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 ```html
``` ### Hamburger to X Animation ```html ``` ## Transition on Enter/Leave (with JS) For complex enter/leave transitions, use a library like Headless UI: ```jsx import { Transition } from '@headlessui/react' function Modal({ isOpen, children }) { return ( {children} ) } ``` ## Performance Tips ### 1. Prefer GPU-Accelerated Properties ```html
``` ### 2. Use Specific Transitions ```html
``` ### 3. Keep Animations Short ```html