animation

CSSアニメーションで要素をアニメーション化するためのユーティリティ。

クラススタイル

クラス	スタイル
`animate-spin`	`animation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } }`
`animate-ping`	`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`	`animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } }`
`animate-bounce`	`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>;`

animate-spin

animation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } }

animate-ping

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

animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } }

animate-bounce

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>;

例

スピンアニメーションの追加

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>

Pingアニメーションの追加

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>

パルスアニメーションの追加

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>

バウンスアニメーションの追加

animate-bounce ユーティリティを使用して、要素を上下にバウンスさせます。「スクロールダウン」インジケーターなどに役立ちます。

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

モーション削減のサポート

ユーザーがモーション削減を希望している場合、motion-safe および motion-reduce バリアントを使用して、アニメーションとトランジションを条件付きで適用できます。

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

カスタム値の使用

以下を使用してください animate-[<value>] 構文を設定するにはanimation完全にカスタム値に基づいて

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

CSS変数については、以下も使用できます。 animate-(<custom-property>) 構文

<div class="animate-(--my-animation) ...">
  <!-- ... -->
</div>

これは単なる略記です animate-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスan animation ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティをミディアムスクリーンサイズ以上でのみ適用できます

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

バリアントのドキュメントでバリアントの使用方法の詳細をご覧ください。

テーマのカスタマイズ

--animate-* テーマ変数を使用して、animation プロジェクト内のユーティリティをカスタマイズします

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;
  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}

これで animate-wiggle ユーティリティをマークアップで使用できます

<div class="animate-wiggle">
  <!-- ... -->
</div>

テーマのドキュメントでテーマのカスタマイズの詳細をご覧ください。テーマドキュメント.

このページ内