Tailwind CSS Animations

Animations are powerful tools for attracting user attention, providing feedback, and creating smooth experiences. Tailwind CSS includes some basic animation and transition utility classes, making it easy to add dynamic effects to your website.

Transitions

Transitions are the most common form of animation, smoothly adding animation effects when an element's CSS property changes. For example, when a button's background color changes in the hover state.

To enable transitions, you need to do three things:

1. Add the transition class: This is a base class that enables transition effects.
2. Set transition duration: Use duration-{time} utility classes.
   • duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
3. Set transition timing function: Use ease-{timing} utility classes.
   • ease-linear: Linear
   • ease-in: Slow start
   • ease-out: Slow end
   • ease-in-out: (default) Slow start and end

<button class="transition duration-300 ease-in-out bg-blue-500 hover:bg-red-500 transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me
</button>

In this example, when the mouse hovers, the changes to background color, Y-axis position, and scale will all happen smoothly within 300 milliseconds.

By default, Tailwind enables transitions for commonly used properties like colors, shadows, and transforms. You can control which properties participate in transitions individually using transition-{property} utility classes (like transition-colors).

Transforms

Transform allows you to rotate, scale, move, and skew elements without affecting other elements in the document flow.

• Scale: scale-{amount}, scale-x-{amount}, scale-y-{amount}
  • scale-95, scale-100, scale-110
• Rotate: rotate-{angle}
  • rotate-45, rotate-90, rotate-180
• Translate: translate-x-{amount}, translate-y-{amount}
  • translate-x-4, translate-y-1/2, -translate-x-full
• Skew: skew-x-{angle}, skew-y-{angle}
  • skew-x-3, skew-y-12

To use transform, you must first add the transform utility class to the element to enable GPU acceleration for smoother animation effects.

Animation

For more complex, keyframe-based animations, Tailwind provides some preset animation utility classes.

• animate-spin: Used to create rotating animations for loading indicators.

  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>

• animate-ping: Creates an outward rippling effect, often used for notification badges.

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

• animate-pulse: Creates a slow fade-in and fade-out effect, often used for skeleton loading states.

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

• animate-bounce: Creates an up-and-down bouncing effect, often used for arrows indicating scrollability or clickability.

You can also define your own keyframe animations in tailwind.config.js and apply them using animate-{name}.