animate.css 仅在添加“无限”时才有效答案

【问题标题】：animate.css only works if "infinite" is addedanimate.css 仅在添加“无限”时才有效
【发布时间】：2016-05-22 11:59:09
【问题描述】：

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

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

场景1（动画+rotateIn在网页上什么都不做）：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

opacity : 0

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

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

一切都会被解释。

【讨论】：

这似乎对我不起作用，不幸的是，我在您提供的链接中没有找到答案。无论如何，谢谢安迪！
您是否在页面上使用 javascript 来删除类？
您是否使用 javascript 来删除类？当您将 animate.css 与 jQuery 结合使用或添加您自己的 CSS 规则时，您可以使用 animate.css 做一大堆其他事情。使用 jQuery 轻松动态添加动画： $('#yourElement').addClass('animatedbounceOutLeft');
是的，到目前为止，我发现制作动画的唯一方法是在内容加载后添加类。示例： $(window).scroll(function() { if ($(document).scrollTop() > 200) { $('#ab').addClass('animated rotateIn'); } });
您还没有阅读并理解我的答案。如果不先隐藏在页面上，动画就无法工作。您需要阅读更多关于 css3 动画的内容才能理解。