Aller au contenu

Animation

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import dedent from "dedent";

export const title = "animation"; export const description = "Utilities for animating elements with CSS animations.";

<ApiTable rows={[ [ "animate-spin", dedent` animation: var(--animate-spin); / spin 1s linear infinite /

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  `,
],
[
  "animate-ping",
  dedent`
    animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */

    @keyframes ping {
      75%, 100% {
        transform: scale(2);
        opacity: 0;
      }
    }
  `,
],
[
  "animate-pulse",
  dedent`
    animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */

    @keyframes pulse {
      50% {
        opacity: 0.5;
      }
    }
  `,
],
[
  "animate-bounce",
  dedent`
    animation: var(--animate-bounce); /* bounce 1s infinite */

    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }
  `,
],
["animate-none", "animation: none;"],
["animate-(<custom-property>)", "animation: var(<custom-property>);"],
["animate-[<value>]", "animation: <value>;"],

]} />

Examples

Adding a spin animation

Use the animate-spin utility to add a linear spin animation to elements like loading indicators:

{
} 
<!-- [!code classes:animate-spin] -->
<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing…
</button>

Adding a ping animation

Use 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:

{
} 
<!-- [!code classes:animate-ping] -->
<span class="relative flex size-3">
  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span>
</span>

Adding a pulse animation

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

{
} 
<!-- [!code classes:animate-pulse] -->
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4">
  <div class="flex animate-pulse space-x-4">
    <div class="size-10 rounded-full bg-gray-200"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 rounded bg-gray-200"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="col-span-2 h-2 rounded bg-gray-200"></div>
          <div class="col-span-1 h-2 rounded bg-gray-200"></div>
        </div>
        <div class="h-2 rounded bg-gray-200"></div>
      </div>
    </div>
  </div>
</div>

Adding a bounce animation

Use the animate-bounce utility to make an element bounce up and down—useful for things like "scroll down" indicators:

{
} 
<!-- [!code classes:animate-bounce] -->
<svg class="size-6 animate-bounce ...">
  <!-- ... -->
</svg>

Supporting reduced motion

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

<!-- [!code classes:motion-safe:animate-spin] -->
<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

Using a custom value

Responsive design

Customizing your theme

<CustomizingYourTheme utility="animate" name="animation" customName="wiggle" customCSS={ dedent` @theme { / [!code highlight:12] / --animate-wiggle: wiggle 1s ease-in-out infinite;

    @keyframes wiggle {
      0%,
      100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }
  }
`}

/>