Animation

    Utilities for animating elements with CSS animations.

    Add the utility to add a linear spin animation to elements like loading indicators.

    Ping

    Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

    Animation - 图2

    1. <span class="relative flex h-3 w-3">
    2.   <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
    3.   <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
    4. </span>

    Pulse

    Add the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

    1. <div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
    2.   <div class="animate-pulse flex space-x-4">
    3.     <div class="rounded-full bg-slate-200 h-10 w-10"></div>
    4.     <div class="flex-1 space-y-6 py-1">
    5.       <div class="space-y-3">
    6.         <div class="grid grid-cols-3 gap-4">
    7.           <div class="h-2 bg-slate-200 rounded col-span-2"></div>
    8.           <div class="h-2 bg-slate-200 rounded col-span-1"></div>
    9.         </div>
    10.         <div class="h-2 bg-slate-200 rounded"></div>
    11.       </div>
    12.     </div>
    13.   </div>
    14. </div>

    Animation - 图4

    Prefers-reduced-motion

    For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the and motion-reduce variants:

    1. <button type="button" class="bg-indigo-600 ..." disabled>
    2.   <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    3.     <!-- ... -->
    4.   </svg>
    5.   Processing
    6. </button>

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:animate-spin to only apply the animate-spin utility on hover.

    1. <div class="hover:animate-spin">
    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:animate-spin to apply the animate-spin utility at only medium screen sizes and above.

    To learn more, check out the documentation on , Dark Mode and .

    Customizing your theme

    Animations by their very nature tend to be highly project-specific. The animations we include by default are best thought of as helpful examples, and you’re encouraged to customize your animations to better suit your needs.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.       animation: {
    5.       }
    6.     }
    7.   }
    8. }

    To add new animation @keyframes, use the keyframes section of your theme configuration:

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     extend: {
    4.       keyframes: {
    5.         wiggle: {
    6.           '0%, 100%': { transform: 'rotate(-3deg)' },
    7.           '50%': { transform: 'rotate(3deg)' },
    8.         }
    9.       }
    10.     }
    11.   }
    12. }

    You can then reference these keyframes by name in the animation section of your theme configuration:

    tailwind.config.js

    Learn more about customizing the default theme in the theme customization documentation.

    Arbitrary values

    If you need to use a one-off animation value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

    1. <div class="animate-[wiggle_1s_ease-in-out_infinite]">
    2.   <!-- ... -->