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

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

animation: bounce 1s infinite;

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

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

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