过渡 & 动画
用于使用 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
实用程序为加载指示器等元素添加线性旋转动画
<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
实用程序使元素像雷达 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>
在 主题文档.