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

【问题标题】：How can I make my animate.css animation loop forever?我怎样才能让我的 animate.css 动画永远循环？
【发布时间】：2020-12-29 16:33:45
【问题描述】：

我怎样才能让我的 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>

谢谢！

【问题讨论】：

使用迭代计数=“无限”而不是动画迭代计数=“无限”。文档是这样说的。在此处检查它接受的道具。 github.com/dielduarte/animate-css-styled-components#props

【解决方案1】：

您需要使用iterationCount 作为道具。

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

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

【讨论】：

【解决方案2】：

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

所以对于你的情况：

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

【讨论】：