At your disposal are 74 cool animations, which you can apply to each element in your project.
You simply need to add one of 74 prepared classes to your html elements.
Basic usage
1. Add the class .animated to the element you want to animate. You may also want to include the class .infinite for an infinite loop.
2. Add one of the classes from the lists above
Example:
<h1 class="animated infinite fadeIn">Example</h1>
You can do a whole bunch of other stuff with animations when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
$('#yourElement').addClass('animated bounceOutLeft');
You can also detect when an animation ends:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animatione
You can change the duration of your animations, add a delay or change the number of times that it plays:
Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
Created by Daniel Eden
Reveal Animations When Scrolling
Examples:
Basic usage
Initialization
Before using animations, you have to initialize it in your project by using code below.
<script>
new WOW().init();
</script>
Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it. Then add one of the animation classes from the lists above
Example:
<div class="wow bounceInUp">
Content to Reveal Here
</div>
Advanced Options
data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated
Example:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
</section>
Created by Matt Aussaguel