Animation (動畫)

旋轉 (Spin)

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

Ping

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

• 這對通知標記一類的元素很實用。

脈衝 (Pulse)

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

• 這很適合用在框架結構元素 (Skeleton loaders) 上製造頁面讀取中的效果。

彈跳 (Bounce)

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

• 這很適合用在「向下捲動」這類的元素上。

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

你可以透過使用 motion-safe 和 motion-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-none 在 md 及其之上的斷點設置 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.js 的 variants 區塊中變更 animation 屬性來決定有哪些變化模式會生成。

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

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

停用

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

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