animate.css在页面加载时动画

Question

我在我的网站上使用animate.css，我使用了一个bootstrap carousel滑块，它在google上搜索并放在我的网站上。它的工作正常但是之后我的animate.css工作不正常意味着HTML页面中的所有动画元素在页面加载时都是动画。 例如：我在页面下方使用fadeInRight动画类，但是当我要向下翻页时，当我刷新该特定元素的页面时，它工作正常。请解决此问题

please check the site

Answer 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

Answer 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