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

【问题标题】：how to stop tailwindcss animation after a set time如何在设定时间后停止tailwindcss动画
【发布时间】：2022-03-26 18:18:22
【问题描述】：

我想知道是否有办法在设定时间后停止 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>

我尝试了 duration-75 但动画不会停止

【问题讨论】：

标签： html css css-animations tailwind-css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我正在尝试构建一个简短的弹跳动画，当用户无法登录时，它会在屏幕上弹跳一条小错误消息。该消息只需弹跳几秒钟即可引起用户的注意，而不会打扰用户。从@Matt 的回答中的link 可以看出，tailwind 使用以下 css 代码作为反弹类：

animation: bounce 1s infinite;

其中bounce 指的是@keyframes 配置，1s 指的是单次迭代的持续时间，infinite 指的是迭代次数。这意味着我们必须以某种方式调整最后一部分。 tailwind 的巧妙之处在于您可以扩展 tailwind.config.js 中的配置并创建自己的类。在这里，我借用了反弹类的关键帧来制作我自己的较短版本：

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

就这么简单，无需使用自定义 css 代码覆盖其他文件。

【讨论】：