CSS3 ANIMATE

BECAUSE STATIC CONTENT IS BORING

×

Warning

JUser: :_load: Unable to load user with ID: 939

I. Quick Start

Make an element revealable

Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it. (You can change this CSS class in the WOW settings to avoid name conflicts.)
<div class="wow">
  Content to Reveal Here
</div>
 

Choose the animation style

Pick an animation style in Animate.css , then add the CSS class to the HTML element.
<div class="wow bounceInUp">
  Content to Reveal Here
</div>
 

II. 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>

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

III. Customize Settings

boxClass: Class name that reveals the hidden box when user scrolls.
animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.
 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();
 

IV. All the animations

bounce

<h2 class='wow bounce'>It Works!</h2>
bounce
 

flash

<h2 class='wow flash'>It Works!</h2>
flash
 

rubberBand

<h2 class='wow rubberBand'>It Works!</h2>
rubberBand
 

bounceIn

<h2 class='wow bounceIn'>It Works!</h2>
bounceIn
 

bounceInDown

<h2 class='wow bounceInDown'>It Works!</h2>
bounceInDown
 

bounceInRight

<h2 class='wow bounceInRight'>It Works!</h2>
bounceInRight
 

bounceInUp

<h2 class='wow bounceInUp'>It Works!</h2>
bounceInUp
 

bounceInLeft

<h2 class='wow bounceInLeft'>It Works!</h2>
bounceInLeft
 

bounceOut

<h2 class='wow bounceOut'>It Works!</h2>
bounceOut
 

bounceOutDown

<h2 class='wow bounceOutDown'>It Works!</h2>
bounceOutDown
 

bounceOutLeft

<h2 class='wow bounceOutLeft'>It Works!</h2>
bounceOutLeft
 

bounceOutRight

<h2 class='wow bounceOutRight'>It Works!</h2>
bounceOutRight
 

bounceOutUp

<h2 class='wow bounceOutUp'>It Works!</h2>
bounceOutUp
 

fadeIn

<h2 class='wow fadeIn'>It Works!</h2>
fadeIn
 

fadeInDown

<h2 class='wow fadeInDown'>It Works!</h2>
fadeInDown
 

fadeInDownBig

<h2 class='wow fadeInDownBig'>It Works!</h2>
fadeInDownBig
 

fadeInLeft

<h2 class='wow fadeInLeft'>It Works!</h2>
fadeInLeft
 

fadeInLeftBig

<h2 class='wow fadeInLeftBig'>It Works!</h2>
fadeInLeftBig
 

fadeInRight

<h2 class='wow fadeInRight'>It Works!</h2>
fadeInRight
 

fadeInRightBig

<h2 class='wow fadeInRightBig'>It Works!</h2>
fadeInRightBig
 

fadeInUp

<h2 class='wow fadeInUp'>It Works!</h2>
fadeInUp
 

fadeInUpBig

<h2 class='wow fadeInUpBig'>It Works!</h2>
fadeInUpBig
 

fadeOut

<h2 class='wow fadeOut'>It Works!</h2>
fadeOut
 

fadeOutDown

<h2 class='wow fadeOutDown'>It Works!</h2>
fadeOutDown
 

fadeOutDownBig

<h2 class='wow fadeOutDownBig'>It Works!</h2>
fadeOutDownBig
 

fadeOutLeft

<h2 class='wow fadeOutLeft'>It Works!</h2>
fadeOutLeft
 

fadeOutLeftBig

<h2 class='wow fadeOutLeftBig'>It Works!</h2>
fadeOutLeftBig
 

fadeOutRight

<h2 class='wow fadeOutRight'>It Works!</h2>
fadeOutRight
 

fadeOutRightBig

<h2 class='wow fadeOutRightBig'>It Works!</h2>
fadeOutRightBig
 

fadeOutUp

<h2 class='wow fadeOutUp'>It Works!</h2>
fadeOutUp
 

growIn

<h2 class='wow growIn'>It Works!</h2>
growIn
 

shake

<h2 class='wow shake'>It Works!</h2>
shake
 

rotateIn

<h2 class='wow rotateIn'>It Works!</h2>
rotateIn
 

rotateInUpLeft

<h2 class='wow rotateInUpLeft'>It Works!</h2>
rotateInUpLeft
 

rotateInDownLeft

<h2 class='wow rotateInDownLeft'>It Works!</h2>
rotateInDownLeft
 

rotateInUpRight

<h2 class='wow rotateInUpRight'>It Works!</h2>
rotateInUpRight
 

rotateInDownRight

<h2 class='wow rotateInDownRight'>It Works!</h2>
rotateInDownRight
 

rotateOut

<h2 class='wow rotateOut'>It Works!</h2>
rotateOut
 

rotateOutDownLeft

<h2 class='wow rotateOutDownLeft'>It Works!</h2>
rotateOutDownLeft
 

rotateOutDownRight

<h2 class='wow rotateOutDownRight'>It Works!</h2>
rotateOutDownRight
 

rotateOutUpLeft

<h2 class='wow rotateOutUpLeft'>It Works!</h2>
rotateOutUpLeft
 

rotateOutUpRight

<h2 class='wow rotateOutUpRight'>It Works!</h2>
rotateOutUpRight
 

hinge

<h2 class='wow hinge'>It Works!</h2>
hinge
 

rollIn

<h2 class='wow rollIn'>It Works!</h2>
rollIn
 

rollOut

<h2 class='wow rollOut'>It Works!</h2>
rollOut
 

zoomIn

<h2 class='wow zoomIn'>It Works!</h2>
zoomIn
 

zoomInDown

<h2 class='wow zoomInDown'>It Works!</h2>
zoomInDown
 

zoomInLeft

<h2 class='wow zoomInLeft'>It Works!</h2>
zoomInLeft
 

zoomInRight

<h2 class='wow zoomInRight'>It Works!</h2>
zoomInRight
 

zoomInUp

<h2 class='wow zoomInUp'>It Works!</h2>
zoomInUp
 

zoomOut

<h2 class='wow zoomOut'>It Works!</h2>
zoomOut
 

zoomOutDown

<h2 class='wow zoomOutDown'>It Works!</h2>
zoomOutDown
 

zoomOutLeft

<h2 class='wow zoomOutLeft'>It Works!</h2>
zoomOutLeft
 

zoomOutRight

<h2 class='wow zoomOutRight'>It Works!</h2>
zoomOutRight
 

zoomOutUp

<h2 class='wow zoomOutUp'>It Works!</h2>
zoomOutUp
 

slideInDown

<h2 class='wow slideInDown'>It Works!</h2>
slideInDown
 

slideInLeft

<h2 class='wow slideInLeft'>It Works!</h2>
slideInLeft
 

slideInRight

<h2 class='wow slideInRight'>It Works!</h2>
slideInRight
 
 

slideInUp

<h2 class='wow slideInUp'>It Works!</h2>
slideInUp
 

slideOutDown

<h2 class='wow slideOutDown'>It Works!</h2>
slideOutDown
 

slideOutLeft

<h2 class='wow slideOutLeft'>It Works!</h2>
slideOutLeft
 

slideOutRight

<h2 class='wow slideOutRight'>It Works!</h2>
slideOutRight
 

slideOutUp

<h2 class='wow slideOutUp'>It Works!</h2>
slideOutUp
 

wiggle

<h2 class='wow wiggle'>It Works!</h2>
wiggle
 

swing

<h2 class='wow swing'>It Works!</h2>
swing
 

tada

<h2 class='wow tada'>It Works!</h2>
tada
 

wobble

<h2 class='wow wobble'>It Works!</h2>
wobble
 

pulse

<h2 class='wow pulse'>It Works!</h2>
pulse
 

lightSpeedIn

<h2 class='wow lightSpeedIn'>It Works!</h2>
lightSpeedIn
 

lightSpeedOut

<h2 class='wow lightSpeedOut'>It Works!</h2>
lightSpeedOut
 

flipInX

<h2 class='wow flipInX'>It Works!</h2>
flipInX
 

flipInY

<h2 class='wow flipInY'>It Works!</h2>
flipInY
 

flipOutX

<h2 class='wow flipOutX'>It Works!</h2>
flipOutX
 

flipOutY

<h2 class='wow flipOutY'>It Works!</h2>
flipOutY