我在我的网站上使用了 wow.js，问题是每次刷新页面时，它都是动画两次而不是一次。
这是视频演示它是如何在我的系统演示中发生的
这是页面链接http://csl.nextgeni.us/loading/index.html
Note:我注意到 CSS 动画在文档准备好之前运行，并在文档准备好后再次运行。
这是片段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="http://csl.nextgeni.us/loading/css/bootstrap.min.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/camera.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/animate.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/font-awesome.min.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/style.css?v002" rel="stylesheet">
</head>
<body>
<header id="header">
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="list-inline text-right no-underline">
<li><span data-wow-duration="0.8s" data-wow-delay="0.4s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-info"></span><span class="hidden-xs">info@creditstyle.co.uk</span></a></span></li>
<li><span data-wow-duration="0.8s" data-wow-delay="0.5s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-dm"></span><span class="hidden-xs">Direct Message</span></a></span></li>
<li><span data-wow-duration="0.8s" data-wow-delay="0.6s" class="wow animated bounceInRight"><span class="icon icon-phone"></span><span>0114 290 1400</span></span></li>
</ul>
</div>
</div>
</div><!-- .container -->
</div><!-- topbar -->
<div class="menu-wrap">
<div class="navbar navbar-csl " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="feature-block wow bounceInLeft animated navbar-brand logo" href="#">Credit Style Limited</a>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav navbar-right" id="menu">
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.4s" class="feature-block wow animated fadeInDown" href="index.php">Home</a>
</li>
<li class='active'>
<a data-wow-duration="0.3s" data-wow-delay="1.5s" class="feature-block wow animated fadeInDown" href="our-team.php">Our Team</a>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.6s" class="feature-block wow animated fadeInDown" href="pre-legal-collection.php">Services</a>
<ul class="dropdown">
<li><a href="pre-legal-collection.php">Pre Legal Collection</a></li>
<li><a href="legal-collection.php">Legal Collection</a></li>
<li><a href="field.php">Field</a></li>
<li><a href="debt-counselling.php">Debt Counselling</a></li>
</ul>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.7s" class="feature-block wow animated fadeInDown disabled">Directions</a>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.8s" class="feature-block wow animated fadeInDown" href="contact-us.php">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div><!-- .navbar -->
</div><!-- .menu-wrap -->
</header><!-- #header -->
<div data-wow-delay=".7s" class="wow animated bounceIn page-heading">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Our Team</h1>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- .page-heading -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="http://202.141.239.75/AESd/O2O2CVAU72yX4WEd3LAUNQkwom/wp-content/uploads/2015/04/nature-images.jpg" data-wow-duration="" data-wow-delay="1s" class="wow animated bounceIn img-responsive csl">
</div><!-- .col -->
<div class="col-sm-6">
<div data-wow-duration="" data-wow-delay=".5s" class="wow animated bounceInRight pssh">We're here to help you</div>
<div data-wow-duration="" data-wow-delay=".6s" class="wow animated bounceInRight">
<p>Our clients are from all walks of life and are in financial difficulty for all sorts of reasons from ill- health or relationship problems to changes in employment or over committing on credit.</p>
<p>We understand that making the decision to ask for help with your financial problems can be difficult. That's why we won't ever judge you or take sides, and why we'll always be there to provide the support that's essential to help you out of problem debt.</p>
<p>Every year we provide much-needed free debt advice to hundreds of thousands of people either over the phone or through our website. We also provide help and support to over 100,000 people who are repaying their debts through one of our free debt management plans.</p>
</div>
</div><!-- .col -->
</div><!-- .row -->
<div data-wow-duration=".6s" data-wow-delay=".3s" class="wow animated fadeInDown cta">
<div class="row">
<div class="col-sm-8">
<span data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInLeft fa fa-phone"></span>
<div data-wow-duration="" data-wow-delay=".7s" class="wow animated fadeIn heading">Have a question or need a custom quote?</div>
<div data-wow-duration="" data-wow-delay=".9s" class="wow animated fadeIn sub-heading">Contact us via e-mail Or just give us a call at 0114 290 1400</div>
</div><!-- .col -->
<div class="col-sm-4 text-right">
<a data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInRight action" href="#">Contact Us</a>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .cta -->
</div><!-- .container -->
<script src="http://csl.nextgeni.us/loading/js/jquery-2.1.4.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/wow.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/bootstrap.min.js"></script>
<script type="text/javascript">
new WOW().init();
jQuery(document).ready(function(e) {
try{
console.log('ready');
}
catch(e){
console.log(e);
}
});
jQuery(window).load(function() {
try{
console.log('loaded');
}
catch(e){
console.log(e);
}
})
</script>
</body>
</html>