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

Question

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

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

没有内置的方法来做这件事。您可以创建自己的类来重写迭代。

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

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

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

Answer 2

我试图构建一个简短的弹跳动画，当用户无法登录时，它会在屏幕上弹出一条小错误消息。这条消息只需要弹几秒钟就能引起用户的注意，而不会惹恼用户。正如您在@Matt的答案中从链接中看到的那样，顺风使用下面的css代码来处理弹出类：

animation: bounce 1s infinite;

其中bounce指的是@keyframes配置，1s是指单个迭代的时间，infinite是指迭代的数量。这意味着我们必须调整最后一部分。顺风的好处在于，您可以在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代码来干扰其他文件。