Elements logo

Animation

Utilities for animating elements with CSS animations.

Class reference

ClassProperties
animation-noneanimation: none;
animation-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animation-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
animation-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animation-bounceanimation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } }

Spin

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

<button type="button" class="bg-pink-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

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.

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

Pulse

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

<div class="border border-blue-200 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-blue h-12 w-12"></div>
    <div class="flex-1 space-y-4 py-1">
      <div class="h-4 bg-blue rounded w-3/4"></div>
      <div class="space-y-2">
        <div class="h-4 bg-blue rounded"></div>
        <div class="h-4 bg-blue rounded w-5/6"></div>
      </div>
    </div>
  </div>
</div>

Bounce

Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

Prefers-reduced-motion

You can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

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

Learn more in the state variants documentation.

Responsive

To change or disable an animation at a specific breakpoint, add a {screen}: prefix to any existing animation utility. For example, use md:animate-none to apply the animate-none utility at only medium screen sizes and above.

<div class="animate-spin md:animate-none ...">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.