Question

我的问题是动画没有显示在我的网页上，除非在课程中添加了“无限”。例如：

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

场景1（动画+ rotateIn在网页上不执行任何操作）：

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

场景2（为类添加无限使动画显示。但无限......）：

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

对于我使用此组合的任何元素，似乎就是这种情况。除非添加“无限”，否则动画不会出现，这不是我的目标。

Answer 1

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

为什么？因为css线性动画无法在已显示的对象上运行并且在dom / viewport中可见。

它是如何工作的？在这种情况下，图像的对象是：

opacity : 0

在进入视口的对象上，javascript将删除隐藏的类，动画将开始。

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

所有人都将被解释。