Lzh on GitHub

animation

用于通过 CSS 动画为元素添加动画效果的工具。

快速参考

类别样式
animate-spinanimation: var(--animate-spin); /* spin 1s linear infinite */

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

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

@keyframes pulse {
50% {
opacity: 0.5;
}
}
animate-bounceanimation: 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-noneanimation: 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>

添加脉冲动画

使用 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>] 语法可以根据完全自定义的值设置动画：

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

响应式设计

为 animation 工具添加 md: 等断点变体前缀，使其仅在中等及以上屏幕尺寸时应用：

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

在 变体文档 中了解更多关于使用变体的信息。

自定义你的主题

使用 --animate-* 主题变量来定制项目中的动画工具：

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

在 主题文档 中了解更多关于自定义主题的信息。