動態效果
動畫簡寫、持續時間值與緩動曲線。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
animate-<animation> | animation: var(--animate-<animation>); |
animation-<duration> | animation-duration: var(--duration-<duration>); |
transition-<duration> | transition-duration: var(--duration-<duration>); |
animation-delay-<duration> | animation-delay: var(--duration-<duration>); |
transition-delay-<duration> | transition-delay: var(--duration-<duration>); |
animation-<easing> | animation-timing-function: var(--easing-<easing>); |
transition-<easing> | transition-timing-function: var(--easing-<easing>); |
animation- 與 transition- 前綴都同時讀取 duration 與 easing 命名空間。自訂鍵必須在兩個命名空間之間保持不同，否則相同的鍵會產生歧義。animate- 讀取的則是完整動畫簡寫。
值
十個動畫 token 包含關鍵影格名稱，並會無限重複。七個持續時間提供時間長度，九條緩動曲線則將時間進度對應到值進度。視覺比較只播放一次，初始狀態為暫停，並遵循減少動態效果偏好。
動畫
| 類別 | 值 |
|---|---|
animate-fade | fade 1s infinite |
animate-flash | flash 1s infinite |
animate-float | float 3s ease-in-out infinite |
animate-heart | heart 1s infinite |
animate-jump | jump 1s infinite |
animate-ping | ping 1s infinite |
animate-pulse | pulse 1s infinite |
animate-rotate | rotate 1s linear infinite |
animate-shake | shake 1s infinite |
animate-zoom | zoom 1s infinite |
比較全部動畫
持續時間
| 類別 | 值 |
|---|---|
transition-fastest | 75ms |
transition-faster | .1s |
transition-fast | .15s |
transition-normal | .2s |
transition-slow | .3s |
transition-slower | .5s |
transition-slowest | .8s |
比較全部持續時間
緩動
| 類別 | 值 |
|---|---|
transition-smooth | cubic-bezier(.4, 0, .2, 1) |
transition-soft | cubic-bezier(.33, 1, .68, 1) |
transition-crisp | cubic-bezier(.16, 1, .3, 1) |
transition-snap | cubic-bezier(.2, 0, 0, 1) |
transition-accelerate | cubic-bezier(.4, 0, 1, 1) |
transition-decelerate | cubic-bezier(0, 0, .2, 1) |
transition-overshoot | cubic-bezier(.34, 1.56, .64, 1) |
transition-rewind | cubic-bezier(.36, 0, .66, -.56) |
transition-spring | cubic-bezier(.68, -.6, .32, 1.6) |
比較全部緩動曲線
覆寫動畫的一個部分
animate-pulse 設定完整的 animation 簡寫，包括 1s 的持續時間。條件相同時，animation-slow 會排在簡寫之後，並將持續時間替換為 300ms。關鍵影格名稱與迭代次數維持不變；調整 class 屬性中的順序也不會改變結果。
持續時間 class 改變時間設定，但保留相同關鍵影格
兩者使用相同的 pulse 關鍵影格。長條量測的是一次迭代的持續時間，不是動畫進度或渲染速度。預設集會重複播放，這個比較則單獨呈現一次迭代。
文字說明
- animate-pulse 簡寫提供 pulse 1s infinite，每次迭代的持續時間為一秒。
- 條件相同時，animation-slow 會排在 animate-pulse 之後，只將持續時間替換為 var(--duration-slow)，也就是 300ms。pulse 關鍵影格與無限迭代次數維持不變。
- 兩條水平長條都從零開始，在同一條毫秒軸上呈現 1000:300 的長度比例。它們量測的是宣告的單次迭代持續時間，不是效能，也不是形狀移動的距離。
- 預設的 pulse token 會無限重複。需要只播放一次時，請加入原生迭代次數或定義自訂 token；調整 class 名稱的順序不會改變生成規則的順序。
使用持續時間或緩動家族調整其中一個部分，或使用它們的變數組成自訂動畫 token。(animation-duration:450ms) 這類明確的原生宣告可以提供字面值覆寫。兩條長條以相同時間尺度呈現一次迭代，不是在比較渲染效能。
動畫 token 會保留其值所參照的關鍵影格。單獨的持續時間或緩動 class 不會指定動畫名稱。轉場也需要有屬性值發生變更；transition-fast 提供的是持續時間，不是 hover 狀態或屬性清單。
延遲改變的是效果開始時間，不會拉長持續時間。緩動則改變持續時間內的進度。控制點超出垂直 0–1 範圍的曲線，可能產生超越端點或倒退的效果；不過動畫屬性本身仍可能限制實際渲染的值。
非必要的動態效果請加上 @motion-safe 條件。若要讓預設動畫只播放一次，請在相同條件下加入 (animation-iteration-count:1)。如何為元件組成進場動畫，請見主題指南；擷取頁面狀態之間的轉場，則由檢視轉場指南說明。
用法
允許動態效果時，為連結 hover 後的背景變化加入緩動。連結會返回值對照表。
<a href="#values" class="… (transition-property:background-color) transition-fast@motion-safe transition-smooth@motion-safe bg-surface-inset:hover">View motion values</a>產生的 CSS
@layer theme { :root, :host { --color-zinc-5: oklch(96.5% .0011 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100)) } :root, :host { --duration-fast: .15s; --easing-smooth: cubic-bezier(.4, 0, .2, 1) }}@layer utilities { .\(transition-property\:background-color\) { transition-property: background-color } .bg-surface-inset\:hover:hover { background-color: var(--color-surface-inset) } @media (prefers-reduced-motion: no-preference) { .transition-fast\@motion-safe { transition-duration: var(--duration-fast) } } @media (prefers-reduced-motion: no-preference) { .transition-smooth\@motion-safe { transition-timing-function: var(--easing-smooth) } }}自訂
以持續時間與緩動 token 組成動畫，並在原生 CSS 中宣告關鍵影格：--animate-reveal 會建立 animate-reveal。
@theme { --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both;}@keyframes reveal { from { opacity: 0; translate: 0 .5rem; }}產生的 CSS
@keyframes reveal { from { opacity: 0; translate: 0 .5rem; }}@layer theme { :root, :host { --duration-slow: .3s; --easing-crisp: cubic-bezier(.16, 1, .3, 1) } :root, :host { --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both }}@layer utilities { @media (prefers-reduced-motion: no-preference) { .animate-reveal\@motion-safe { animation: var(--animate-reveal) } }}