如何在设定时间后停止 tailwindcss 动画

Question

我想知道是否有办法在设定时间后停止 tailwindcss 中的动画

10秒后停止弹跳

我已经尝试了一切，但找不到方法

<div class="text-center p-10">
  <button class="px-8 py-2 mx-auto text-white bg-blue-700 rounded transition duration-75 ease-in-out hover:bg-green-400 transform hover:-translate-y-1 animate-bounce">Hello</button>
</div>

我尝试过持续时间 75 但动画不会停止

Answer 1

我试图构建一个短弹跳动画，当用户登录失败时，它会在屏幕上弹跳一条小错误消息。这条消息只需要弹跳几秒钟就可以引起用户的注意，而不会打扰用户。正如您从 @Matt 的答案中的链接看到的，tailwind 对弹跳类使用以下 css 代码：

animation: bounce 1s infinite;

其中bounce指的是@keyframes配置，1s指的是单次迭代的持续时间，infinite指的是迭代的总数，在这种情况下永远持续下去。这意味着我们必须以某种方式调整最后一部分。

Tailwind 的巧妙之处在于您可以扩展配置tailwind.config.js并创建自己的类。在这里，我借用现有反弹类中的关键帧来制作我自己的较短版本：

  // tailwind.config.js
  
  module.exports = {
    theme: {
      extend: {
        animation: {
          // Bounces 5 times 1s equals 5 seconds
          'bounce-short': 'bounce 1s ease-in-out 5'
        }
      }
    }
  }

就这么简单，不会用自定义 CSS 代码污染其他文件。如果需要，您甚至可以使用自定义关键帧扩展配置，这意味着您可以完全控制动画的中间步骤。官方文档演示了如何实现这一点。

Answer 2

没有内置的方法可以做到这一点。您可以创建自己的类来覆盖迭代。

.temporary-bounce {
  -webkit-animation-iteration-count: 10;
  animation-iteration-count: 10;
}

作为参考，反弹的 CSS 在这里。

https://tailwindcss.com/docs/animation#class-reference