我怎样才能让我的 animate.css 动画永远循环？

Question

如何让我的 animate.css 动画永远持续下去？我尝试使用 animationIterationCount = "infinite"。然而，这似乎并没有奏效。

这是我正在使用的插件。 import { Flash } from 'animate-css-styled-components';

 <Flash duration=".8s" delay="1s" animationIterationCount = "infinite">
 <Button primary>LOG IN <AiFillLock /></Button>
 </Flash>

谢谢！

Answer 1

你需要使用 iterationCount 作为道具。

<Flash duration=".8s" delay="1s" iterationCount="infinite" >
 <Button primary>LOG IN <AiFillLock /></Button>
</Flash>

并确保您已安装样式组件。

Answer 2

这个animation-iteration-count属性用在CSS，如果你想写成JSX的形式有iterationCountprop。您可以使用此道具并将其设置为 infinite.

所以对于你的情况：

<Flash duration=".8s" delay="1s" iterationCount="infinite">
  <Button primary>LOG IN <AiFillLock /></Button>
</Flash>

How can I make my animate.css animation loop forever?