「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Animation (動畫)

讓網頁元素動起來的 CSS 動畫功能

Default class reference

Class
Properties
animate-noneanimation: none;
animate-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animate-bounceanimation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

旋轉 (Spin)

為「讀取中」這類提示型的網頁元素加上 animate-spin 功能,使網頁元素以等速、線性 (linear) 的方式旋轉。

<button type="button" class="bg-rose-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

Ping

加上 animate-ping 功能,讓網頁元素像雷達波或水波一樣擴散並淡化。

  • 這對通知標記一類的元素很實用。
<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
</span>

脈衝 (Pulse)

加上 animate-pulse 功能,讓網頁元素輕輕的淡入及淡出。

  • 這很適合用在框架結構元素 (Skeleton loaders) 上製造頁面讀取中的效果。
<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-blue-400 h-12 w-12"></div>
    <div class="flex-1 space-y-4 py-1">
      <div class="h-4 bg-blue-400 rounded w-3/4"></div>
      <div class="space-y-2">
        <div class="h-4 bg-blue-400 rounded"></div>
        <div class="h-4 bg-blue-400 rounded w-5/6"></div>
      </div>
    </div>
  </div>
</div>

彈跳 (Bounce)

加上 animate-bounce 功能,讓網頁元素上下跳動。

  • 這很適合用在「向下捲動」這類的元素上。
<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

偏好設定:減少動態效果 (Prefers-reduced-motion)

你可以透過使用 motion-safemotion-reduce 變化模式,有條件的設置動畫 (animations) 和過場 (transitions):

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

這些變化模式預設情況下是不啟用的,但你可以在你的 tailwind.config.js 檔案中透過 variants 設定啟用它們:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    animation: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

想知道更多,請至 Hover, Focus 以及其他狀態文件

響應式

要在特定的斷點更改或禁用動畫效果,請在任何現有的動畫功能中添加 {screen}: 前綴。

例如:使用 md:animate-nonemd 及其之上的斷點設置 animate-none 功能。

<div class="animate-spin md:animate-none ...">
  <!-- ... -->
</div>

更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。

自定義設定

動畫的性質常常是依賴專案需求決定的,預設包含的動畫建議當做運用範例,我們鼓勵你自行定義所需的動畫,才能更好的滿足你的需求。

預設情況下,Tailwind 提供四個不同的動畫功能作為範例,並且也提供了 animate-none 功能。你可以透過設定檔中主題 (theme) 的 animation 設定來修改、新增、刪除這些功能。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
  }

想要添加新的動畫 @keyframes,使用主題設定中的 keyframes 部分:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        keyframes: {
+         wiggle: {
+           '0%, 100%': { transform: 'rotate(-3deg)' },
+           '50%': { transform: 'rotate(3deg)' },
+         }
        }
      }
    }
  }

然後就可以在你主題配置中的 animation 區塊使用這些 keyframes 的名稱:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
  }

了解更多有關 自定義主題 的資訊。

變化模式

默認情況下, 只有 響應式 的 animation 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 animation 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       animation: ['responsive', 'hover'],
      }
    }
  }

停用

如果你不打算在專案中使用 animation 功能,可以在你的設定檔裡的 corePlugins 屬性中將 animation 設定為 false 來停用功能:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     animation: false,
    }
  }