過渡效果與動畫
動畫
用於使用 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-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-[<值>] 語法 來設定動畫基於完全自訂的值
<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); } }}現在，wiggle animate-擺動 實用工具可以在您的標記中使用
<div class="animate-wiggle"> <!-- ... --></div>在 主題文件
中了解更多有關自訂主題的資訊 .