tailwindcss-animations 是做什麼的?
Tailwind CSS 動畫與轉換效果,包含內建工具類別與自訂關鍵影格。主動針對以下情況啟用:
animate-*工具類別(旋轉、閃爍、脈動、彈跳)- 透過
@theme animate的自訂@keyframes - 轉換工具類別(transition、duration、ease)
- 變形(scale、rotate、translate)與轉換搭配使用
- 減少動畫偏好設定:
prefers-reduced-motion: reduce - 與 Tailwind 整合的 Framer Motion / Motion One
- CSS 滾輪驅動動畫(animation-timeline)
- 與 Tailwind 搭配的檢視轉換 API(view transitions API)
- 懸停、焦點、群組懸停轉換
- 交錯列表動畫
提供:動畫工具參考、自訂關鍵影格範例、減少動畫模式、Framer Motion 整合,以及滾輪驅動動畫配方。