過渡效果與動畫
transition-property
用於控制 CSS 屬性過渡效果的工具類別。
| 類別 | 樣式 |
|---|---|
transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-all | transition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-opacity | transition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-shadow | transition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-transform | transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-none | transition-property: none; |
transition-(<custom-property>) | transition-property: var(<custom-property>); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-[<value>] | transition-property: <value>; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
範例
基本範例
使用像 transition 和 transition-colors 這樣的工具類別來指定哪些屬性在變更時應該進行過渡。
將滑鼠懸停在按鈕上以查看預期的行為
<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ..."> Save Changes</button>支援減少動畫
對於使用者已指定他們偏好減少動畫的情況，您可以使用 motion-safe 和 motion-reduce 變體有條件地應用動畫和過渡效果。
<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ..."> <!-- ... --></button>使用自訂值
使用 transition-[<value>] 語法 來設定過渡屬性基於完全自訂的值
<button class="transition-[height] ..."> <!-- ... --></button>對於 CSS 變數，您也可以使用 transition-(<custom-property>) 語法
<button class="transition-(--my-properties) ..."> <!-- ... --></button>這只是以下寫法的簡寫： transition-[var(<custom-property>)] 它會自動為您加上 var() 函式。
響應式設計
前綴a transition-property 工具類 加上一個斷點變體，例如 md:，以僅在中型 螢幕尺寸及以上應用此工具類。
<button class="transition-none md:transition-all ..."> <!-- ... --></button>在變體文件中了解更多關於使用變體的資訊。
