Scroll-based Animations

scroll-based-animation.css

 <link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
  <style>
.wow:first-child {
	visibility: hidden;
}
#container {
	width: 980px;
	margin: 0 auto;
}
section {
	height: 300px;
	margin: 60px 0;
}
.section--purple {
	background-color: #9b59b6;
}
.section--blue {
	background-color: #3498db;
}
.section--green {
	background-color: #2ecc71;
}
#main {
	text-align: center;
	margin-top:100px;
}
</style>

scroll-based-animation.html

<div id="container">
    <div id="main">
    <section class="wow fadeInUp" style="background-color: #f1c40f;"></section>
    <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
    <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
    <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
    <section class="section--green wow slideInLeft" data-wow-duration="4s" ></section>
  </div>
  </div>

scroll-based-animation.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> 
<script>
   
    new WOW().init();
    
  </script>