Introduction to the use of animate.css animation library

animate.css animation library introduction
Animate.css is a CSS collection of animation effects made by Daniel Eden of Dan Eden using CSS3 animation.
It presets more than 60 kinds of animation effects such as shake, flash, bounce, flip, rotation (rotateIn/rotateOut), fadeIn/fadeOut, etc. All common animation effects. In other words: Animate.css is a collection of cool, fun, and dazzling cross-browser animation styles that you can use directly in your projects.

Browser compatibility of animate.css animation library
Only compatible with browsers that support CSS3 animate property, they are: IE10+, Firefox, Chrome, Opera, Safari.

Usage method
1. Introduce the file animate.css animation library download address

<link rel="stylesheet" href="animate.min.css">
//注：最好不要使用百度静态资源库的animate.css,可能版本没来得及更新部分功能无法使用。

2. HTML and its use

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

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

If you want to use continuous animation, you can add infinite to the class (if you are using animate.css of Baidu static resource library, this seems to be impossible); for example:

<div class="animated bounce infinite" id="hepai"></div>

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

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

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

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

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

#hepai {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
}

animate.css animation form reference