animate.css – a complete CSS3 animation library

Introduction

animate.css is a CSS3 animation library from abroad. It presets more than 60 animation effects such as shake, flash, bounce, flip, rotate (rotateIn/rotateOut), fadeIn/fadeOut, etc., including almost all common animation effects.

Although animate.css can be used to create CSS3 animation effects very conveniently and quickly, it is still recommended to take a look at the code of animate.css. Maybe you can learn something from it.
Compatible

Browser compatibility: Of course, it is only compatible with browsers that support the CSS3 animate attribute. They are: IE10+, Firefox, Chrome, Opera, and Safari.

How to use

1. Import files

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

2. HTML and usage

<div class="animated bounce" id="dowebok"></div>

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

If the animation plays infinitely, you can add class infinite.

You can also add these classes to elements through JavaScript or jQuery, such as:

$(function(){
    $('#dowebok').addClass('animated bounce');
});

Some animation effects will eventually make the element invisible, such as fading out, sliding to the left, etc. You may need to delete the class, such as:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

The default settings of animate.css may not be what we want sometimes, so you can reset them, for example:

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

Note adding the browser prefix.