animate.css 在页面加载时动画答案

【问题标题】：animate.css is animating when the page is loadinganimate.css 在页面加载时动画
【发布时间】：2017-07-24 22:46:38
【问题描述】：

我正在为我的网站使用 animate.css，并且我使用了一个引导轮播滑块，它在谷歌上搜索并放置在我的网站中。它工作正常但在那之后我的 animate.css 无法正常工作意味着 HTML 页面中的所有动画元素在页面加载时都在动画。例如：我在页面下方使用fadeInRight 动画类，但是当我要向下翻页并且当我在该特定元素处刷新页面时它工作正常时它不起作用。请解决这个问题

please check the site

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。请参阅How to Ask 页面以帮助澄清此问题

标签： css animation animate.css

【解决方案1】：

如果您想在滚动时显示动画，这就是您要找的：

http://mynameismatthieu.com/WOW/

CSS 动画不能根据滚动位置延迟。因此，首先，您需要下载 wow.min.js 文件并将其包含到您的页面中，如下所示：

<script src="js/wow.min.js"></script>

<script>
    new WOW().init();
</script>

然后通过在 animate.css 中添加类 'wow' 后跟动画名称，将动画添加到您的 html 元素：

 <section class="wow slideInLeft">
 </section>

有关延迟时间等更多高级选项，请参阅：http://mynameismatthieu.com/WOW/docs.html

【讨论】：

【解决方案2】：

当元素位于视口区域时，您可以使用 wow.js 为元素设置动画。
HTML：

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
            </section>

CSS：

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

js:

<script src="js/wow.min.js"></script>
          <script>
          new WOW().init();
          </script>

查看jquery插件wow.js

【讨论】：