Animate.css a powerful preset CSS3 animation library

Animate.css is an interesting, cross-browser CSS3 animation library. Well worth the reference in our project.

Usage

1. Animate CSS files are introduced first

< Head >  <  rel= "stylesheet"  href= "Animate.min.css"></  head>

2. Add the specified animation style name to the specified element

<class= "Animated bounceoutleft"></div>

This includes two class names, the first of which is basic, the name of the style that must be added, and any element that you want to implement has to add this. The second one is the specified animation style name.

3. If you want to animate an element dynamically, you can do it with jquery:

$ (' #yourElement '). AddClass (' animated bounceoutleft ');

4. When the animation effect is finished, you can add the event via the following code:

$ (' #yourElement '). One (' Webkitanimationend mozanimationend msanimationend oanimationend animationend ', dosomething);

You can also add these classes to elements via JavaScript or jQuery, for example:

$ (function () {    $ (' #jq22 '). AddClass (' animated Bounce ');});

Some animations end up making elements invisible, such as fading out, swiping to the left, and so on, and you might want to delete the class, for example:

$ (function () {    $ (' #jq22 '). AddClass (' animated bounce ');    SetTimeout (function () {        $ (' #jq22 '). Removeclass (' bounce ');    }, 1000);});

The default settings for ANIMATE.CSS may sometimes not be what we want, so you can reset them, such as:

#jq22 {    animate-duration:2s;    Animation duration    animate-delay:1s;    Animation delay time    animate-iteration-count:2;    Number of animation executions}

Reprinted from: http://www.jq22.com/jquery-info819

Animate.css a powerful preset CSS3 animation library