1. 过渡 & 动画
  2. 动画

过渡 & 动画

动画

用于使用 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-(<自定义属性>)
animation: var(<自定义属性>);
animate-[<值>]
animation: <值>;

示例

添加旋转动画

使用 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 实用程序使元素像雷达 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-safemotion-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-[<值>] 语法 设置动画基于完全自定义的值

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

对于 CSS 变量,您还可以使用 animate-(<自定义属性>) 语法

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

这只是 animate-[var(<自定义属性>)]

的简写 它会自动为您添加 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>

请参阅主题文档,了解有关自定义主题的更多信息。 主题文档.

版权所有 © 2025 Tailwind Labs Inc.·商标政策