Share a CSS3 animation library-CSS Tutorial-php.cn

Share a CSS3 animation library

Y2J

Release： 2017-05-20 11:46:31

Original

1386 people have browsed it

Introduction

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

Although it is very convenient and fast to create CSS3 animation effects with the help of animate.css, 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 CSS3 animate property. They are: IE10+, Firefox, Chrome, Opera, and Safari.

Usage method

1. Import the file

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

Copy after login

2. HTML and use

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

Copy after login

to add class## to the element # After refreshing the page, you can see the animation effect. animated is similar to the 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(){
    $(&#39;#dowebok&#39;).addClass(&#39;animated bounce&#39;);
});

Copy after login

Some animation effects will eventually make the element invisible. For example, fade out, slide left, etc., you may need to delete class

, for example:

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

Copy after login

The default settings of animate.css may not be what we want in some cases, so you You can reset it, for example:

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

Copy after login

Be careful to add the browser prefix.

【Related Recommendations】

CSS3 Free Video Tutorial

CSS3 Learning Animation Detailed Explanation

CSS3 Teaching Animation Production Learning

Detailed analysis of the new features in CSS3##5.

Detailed explanation about the new features of css3

The above is the detailed content of Share a CSS3 animation library. For more information, please follow other related articles on the PHP Chinese website!