Share an animated library of CSS3

Brief introduction

Animate.css is a CSS3 animation library from abroad that Presets jitter (shake), Flicker (Flash), Bounce (Bounce), flip (flip), Rotate (rotatein/rotateout), Fade (fadein/ FadeOut) and more than 60 animation effects, almost all of the usual animation effects.

While it's easy and quick to make CSS3 animations with Animate.css, it's recommended to look at Animate.css's code, and maybe you can learn something from it.

Compatible

Browser compatible: Of course, it's compatible with browsers that support CSS3 animate properties, including: ie10+, Firefox, Chrome, Opera, Safari.

How to use

1. Introduction of documents

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

2. HTML and use

<p class= "Animated bounce" id= "Dowebok" ></p>

After adding a class to the element, refresh the page to see the animation effect. Animated is similar to a global variable, which defines the duration of the animation, and bounce is the name of the animated animation effect, and you can choose any effect.

If the animation is playing infinitely, you can add Class infinite.

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

$ (function () {    $ (' #dowebok '). 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 () {    $ (' #dowebok '). AddClass (' animated bounce ');    SetTimeout (function () {        $ (' #dowebok '). Removeclass (' bounce ');    }, 1000);});

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

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

Note Add the browser prefix.

"Recommended"

1. CSS3 Free Video Tutorial

2. Animation of CSS3 Learning

3. CSS3 Teaching Animation Production Learning

4. Detailed analysis of new features in CSS3

5. A detailed description of the new features of CSS3