CSS3 uses ANIMATE.CSS to make stunning animation effects

Animate.css is a super CSS3 animation library, it is simple to use, only the corresponding effect of the class added to the page elements, you can flip, slide, rotate and so on the complex and dazzling cross-browser animation effect, it makes the development of this production page animation becomes very simple.

First, introduce the animate CSS file.

<link rel= "stylesheet" href= "Animate.min.css" >

The specified element is then added to the specified animation class style name.

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

This includes two class names, the first one is basic, and the name of the style that must be added, and any elements you want to implement should add this style. The second is the specified animated style name, which is what animation effect you want, and specify the corresponding animation style name. If you want an animation loop, you can add a style: infinite.

ANIMATE.CSS provides a variety of animation effects that can be added directly as a class style, as in the article: the easing animation mentioned in the JQuery easing animation effect extension.

Bounce, Flash, pulse, Rubberband, Shake, Swing, Tada, wobble, Jello, Bouncein, Bounceindown, Bounceinleft, Bounceinright, Bounceinup, Bounceout, Bounceoutdown, Bounceoutleft, Bounceoutright, Bounceoutup, FadeIn, Fadeindown, FadeInDownBig, Fadeinleft, Fadeinleftbig, Fadeinright, Fadeinrightbig, Fadeinup, Fadeinupbig, fadeout, Fadeoutdown, FadeOutDownBig, Fadeoutleft, Fadeoutleftbig, Fadeoutright, Fadeoutrightbig, Fadeoutup, Fadeoutupbig, Flipinx, FlipInY, FlipOutX, Flipouty, Lightspeedin, Lightspeedout, Rotatein, Rotateindownleft, Rotateindownright, Rotateinupleft, RotateInUpRight , Rotateout, Rotateoutdownleft, Rotateoutdownright, Rotateoutupleft, Rotateoutupright, Hinge, RollIn, RollOut, ZoomIn, Zoomindown, Zoominleft, Zoominright, Zoominup, Zoomout, Zoomoutdown, Zoomoutleft, Zoomoutright, ZoomOutUp, SlideInDown, Slideinleft, Slideinright, Slideinup, Slideoutdown, Slideoutleft, Slideoutright, Slideoutup

If you want to add animated styles to an element dynamically, you can combine jquery to achieve:

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

You can also add an event with the following code after the animation effect finishes:

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