CSS Animations

Animate.CSS is a cross-browser library of CSS animations. As easy to use as an easy thing.

GitHub Animate.css

How to use

1. Add the class .animated to the element you want to animate.

2. Add one of the motion’s classes above. Default property animation-duration is 1s.

3. Finally, you may also want to include the aditional class like:

• .duration-200 overwrite the animation time with 200ms
• .duration-300 overwrite the animation time with 300ms
• .duration-400 overwrite the animation time with 400ms
• .duration-500 overwrite the animation time with 500ms
• .duration-600 overwrite the animation time with 600ms
• .duration-1500 overwrite the animation time with 1500ms
• .infinite for an infinite loop
• .reverse the animation plays backward each cycle
• .forwards moving from one place to another and have it stay there
• .backwards apply the values defined in the first relevant keyframe
• .easing-bounce change transition-timing-function with bounce effect

<elem class="animated bounceIn"></elem>
<elem class="animated infinite fadeInLeft duration-300 easing-bounce"></elem>

Javascript

Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

When animation completes, removes the class automatically:

$('#yourElement').animateCss('bounceOutLeft');

Detect when an animation ends, and wrote callback:

$('#yourElement').animateCss('fadeOutLeft', function(e){
    // this == e
    $(this).anything();
});