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.

Select an animation

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


        <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


Basic usage


Before using animations, you have to initialize it in your project by using code below.

              new WOW().init();

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


       <div class="wow bounceInUp">
            Content to Reveal Here

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


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

       <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">

Created by Matt Aussaguel