animate.css 仅在添加 "infinite" 时有效

Question

我的问题是我的网页上没有显示动画，除非将 "infinite" 添加到 class。示例：

<head>
  <link rel="stylesheet" href="css/animate.css">
</head>

场景一（animated + rotateIn 在网页上什么都不做）：

<body>
 <img class="animated rotateIn" src="images/mackfilms.png" alt="">
</body>

场景 2（在 class 中添加 infinite 使动画出现。但是 infinitely...）：

<body>
 <img class="animated rotateIn infinite" src="images/mackfilms.png" alt="">
</body>

我使用此组合的任何元素似乎都是这种情况。除非添加 "infinite"，否则不会出现动画，这不是我想要的结果。

Answer 1

您需要先隐藏对象。例如添加 class 的隐藏。然后检查对象是否在视口中以删除隐藏的 class.

为什么？ 因为 css 线性动画不能运行在已显示块上并在 dom / 视口中可见的对象上.

它是如何工作的？本例中的对象图像将是：

opacity : 0

在对象进入视口时，javascript 将移除隐藏的 class 并且动画将开始。

要了解更多信息，请参阅此处：

都会一一解释。

animate.css only works if "infinite" is added