Terms of Use


Step 1:

Add class animated to element you want to animate. Also, you can add class repeat for infinite animation

Step 2:

You should add one of the animation classes: Daniel Eden, Magic CSS3, Justin Aguilar

<h1 class="animated repeat bounce">Пример</h1>

 

IMPORTANT!

Do not forget that CSS3 animation supported by not of all the modern browsers (CSS Animation)

Daniel Eden

Demo page

Daniel Eden


Magic CSS3

Demo page

Magic CSS3


Justin Aguilar

Demo page

Justin Aguilar


Advanced usage


You can do a lot of other things with CSS anmimation, when you combaine it with JQuery or add your own CSS rules.
Add animation dynamicly, using JQuery, is easy as pie:

$('selector').addClass('animated bounceOutLeft');
 

You can also keep track of when animation is over:

$('selector').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    doSomething
});

Animation while scrolling

All you have to do is to add attribute data-animate="" with one of the animations (Daniel Eden, Magic CSS3, Justin Aguilar) and a class scroll-effect to the elements which you want to be animated.

<div class="scroll-effect" data-animate="jello">
    ...
</div>

EXAMPLE ANIMATION