animation

示例(Examples)

¥Examples

添加旋转动画(Adding a spin animation)

¥Adding a spin animation

使用 animate-spin 工具为元素添加线性旋转动画，如加载指示器：

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

<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 动画(Adding a ping animation)

¥Adding a ping animation

使用 animate-ping 工具使元素像雷达脉冲或水波一样缩放和淡出 - 对于通知徽章等有用：

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

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

¥Adding a pulse animation

使用 animate-pulse 工具使元素轻轻淡入淡出 - 对于骨架加载器等有用：

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

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

¥Adding a bounce animation

使用 animate-bounce 工具使元素上下弹跳 - 对于 "向下滚动" 指示器等有用：

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

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

支持减少运动(Supporting reduced motion)

¥Supporting reduced motion

对于用户指定他们更偏好缩减动作的情况，你可以使用 motion-safe 和 motion-reduce 变体有条件地应用动画和转场：

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

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

¥Using a custom value

使用 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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 animation 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

在此详细了解如何自定义主题： 主题文档。