Tailwind CSS 動(dòng)畫

動(dòng)畫

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

Spin (旋轉(zhuǎn))

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

<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? 功能，使一個(gè)元素像雷達(dá) ping 或水波紋一樣縮放和消逝—對(duì)通知徽章之類的東西很有用。

<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? 功能，使元素輕輕地淡入和淡出—這對(duì)骨架加載器等有用。

<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? 功能，使元素上下跳動(dòng)—對(duì) “向下滾動(dòng) “指示器有用。

<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

Prefers-reduced-motion

您可以使用 ?motion-safe? 和 ?motion-reduce? 變體有條件地應(yīng)用動(dò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)式

要在特定的斷點(diǎn)處更改或禁用動(dòng)畫，請(qǐng)?jiān)谌魏维F(xiàn)有的動(dòng)畫功能中添加 ?{screen}:? 前綴。例如，使用 ?md:animate-none? 來(lái)應(yīng)用 ?animate-none? 功能，只適用于中等大小的屏幕及以上。

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

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

自定義

默認(rèn)情況下，Tailwind 為四種不同的示例動(dòng)畫提供實(shí)用程序，以及 ?animate-none? 實(shí)用程序。您可以通過自定義主題配置的 ?animation ?部分來(lái)更改、添加或刪除這些。

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

要添加新的動(dòng)畫 ?@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)情況下， 針對(duì) animation 功能類，只生成 responsive 變體。

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

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

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

禁用

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

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