Tailwind CSS 動畫

動畫

使元素產(chǎn)生動畫的CSS動畫功能類。

Spin (旋轉(zhuǎn))

添加 ?animate-spin? 功能，為加載指示器等元素添加線性旋轉(zhuǎn)動畫。

<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? 功能，使一個元素像雷達(dá) 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? 功能，使元素輕輕地淡入和淡出—這對骨架加載器等有用。

<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-safe? 和 ?motion-reduce? 變體有條件地應(yīng)用動畫和過渡。

<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>

這些變體默認(rèn)情況下是不啟用的，但是您可以在您的 ?tailwind.config.js? 文件的 ?variants ?部分啟用它們。

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

響應(yīng)式

要在特定的斷點處更改或禁用動畫，請在任何現(xiàn)有的動畫功能中添加 ?{screen}:? 前綴。例如，使用 ?md:animate-none? 來應(yīng)用 ?animate-none? 功能，只適用于中等大小的屏幕及以上。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

默認(rèn)情況下，Tailwind 為四種不同的示例動畫提供實用程序，以及 ?animate-none? 實用程序。您可以通過自定義主題配置的 ?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',
        }
      }
    }
  }

在主題定制文檔中了解更多關(guān)于定制默認(rèn)主題的信息。

變體

默認(rèn)情況下， 針對 animation 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?animation ?屬性來控制為 animation 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項目中使用 animation 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?animation ?屬性設(shè)置為 ?false ?來完全禁用它們：

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