如何在设定时间后停止 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>

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

Answer 1

没有执行此操作的内置方法。您可以创建自己的 class 来覆盖迭代。

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

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

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

Answer 2

我正在尝试构建一个短弹跳动画，当用户登录失败时，它会在屏幕上弹跳一条小错误消息。此消息只需要弹跳几秒钟即可引起用户的注意，而不会打扰用户.从@Matt 的回答中的 link 可以看出，tailwind 使用以下 css 代码进行反弹 class:

animation: bounce 1s infinite;

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

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

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

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

how to stop tailwindcss animation after a set time

html

css

css-animations

tailwind-css