使用 Tailwind CSS 创建自定义动画

前言

Tailwind CSS是一个实用优先的 CSS 框架，其应用范围迅速增长，使其成为满足我们所有样式需求的热门之选。虽然它允许无需编写任何 CSS 代码即可构建现代网站，但网站样式只是提供良好用户体验的一部分。我们可以创建自定义动画来增添更多亮点。

## 使用 Tailwind CSS 内置 CSS 动画

CSS 动画是一个 CSS 模块，允许你通过关键帧为 CSS 属性值设置动画。你可以通过调整关键帧动画的属性（例如持续时间、缓动函数、方向、延迟等）来改变其效果。

与其他 CSS 属性和模块一样，Tailwind CSS 也附带了一些用于 CSS 动画的实用类。默认情况下，它包含四种基本动画：旋转、脉冲、弹跳和弹跳。这些实用程序类以 animate 关键字为前缀，例如 animate-spin 或 animate-pulse。

例如：

typescript 复制代码

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

上面这段代码展示了如何向 SVG 添加无限旋转动画。您可以根据应用的状态切换此实用工具类。

下面是效果： 在这种情况下使用动画可以帮助用户了解他们的作已被确认并触发了适当的响应。除了功能之外，动画还可以仅用于美观。

在 Tailwind CSS 中创建自定义动画

虽然四个内置的 CSS 动画对于某些一般用例可能已经足够了，但你可能不想仅限于这些。动画是高度特定于项目的，也许你想改用自定义动画。

方便的是，我们无需创建新的样式表并将其链接到标记，就可以向应用添加新动画。直接定义动画的关键帧并扩展主题配置以创建新动画。

假设我们想要创建一个像下面这样的自定义挥手动画，并将其与 Tailwind CSS 一起使用。就是这样。

假设我们想要创建一个像上面这样的自定义挥手动画，并将其与 Tailwind CSS 一起使用。就是这样。

向 Tailwind CSS 配置文件添加 `@keyframes`

首先，我们必须为动画定义关键帧规则。@keyframes CSS at-rule 用于定义动画的初始、中间和最终航点期间元素的 CSS 属性值。通过这种方式，您可以在动画的不同阶段拥有多种不同的风格。在纯 CSS 中，此动画的关键帧如下所示：

css 复制代码

@keyframes wave {
  0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

打开tailwind.config.js文件，并在主题中创建一个空的关键帧对象拓展，再在这个关键帧对象中添加新的动画行为。

css 复制代码

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
    },
  },
  plugins: [],
}

在 Tailwind CSS 中扩展主题

现在我们已经将关键帧规则添加到 tailwind.config.js中现在我们可以添加使用此规则的自定义动画。我们可以自定义动画持续时间、延迟、迭代、定时功能等。

例如：我们希望动画在每个周期中线性过渡两秒钟，并无限保持动画。以下是 CSS 动画速记属性的外观：

css 复制代码

animation: wave 2s linear infinite;

Wave是我们之前定义的关键帧规则的名称。2s 用于表示该动画应该在一个周期内过渡两秒钟， linear用于表示我们希望缓动函数是线性的， infinite使其永久保持动画。

让我们在tailwind.config.js中添加这个theme.extend.animation对象

css 复制代码

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
      animation: {
        'waving-hand': 'wave 2s linear infinite',
      },
    },
  },
  plugins: [],
}

实用程序类是根据animation对象的键生成的。因为我们已经使用了 waving-hand 作为此动画的键，所以我们需要在标记中将 animate-waving-hand 添加到要制作动画的元素中，如下所示：

css 复制代码

<h1 class="flex font-semibold text-purple-600">
  Hello <span class="animate-waving-hand"></span>, 
  稀土掘金
</h1>

现在就完成了一个我们自定义的动画。

总结

借助 Tailwind CSS 的主题配置功能，您不仅可以扩展默认主题以添加自定义颜色、间距或断点，还可以扩展自定义动画，而无需任何妥协和样式表。这就是为什么 Tailwind CSS 如此受开发人员欢迎的原因。

使用 Tailwind CSS 创建自定义动画

前言

## 使用 Tailwind CSS 内置 CSS 动画

在 Tailwind CSS 中创建自定义动画

向 Tailwind CSS 配置文件添加 @keyframes

在 Tailwind CSS 中扩展主题

总结

向 Tailwind CSS 配置文件添加 `@keyframes`