What does animate.css mean?-Front-end Q&A-php.cn

What does animate.css mean?

WBOY

Release： 2022-09-14 17:01:19

Original

2710 people have browsed it

"animate.css" means a collection of animation effects made using animation in CSS3; "animate.css" presets many commonly used animations, which is suitable for quick use and is also convenient for on-demand modification. The syntax is "".

What does animate.css mean?

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does animate.css mean

animate.css is a CSS collection of animation effects produced using CSS3 animation. It has many commonly used animations preset and is very simple to use. This article will introduce the use of animate.css in detail

Animate.css is a simple and efficient css library that encapsulates several simple and common animations, which is suitable for quick use and easy to modify on demand.

Import file

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

Copy after login

Add the specified animation style to the specified element

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

Copy after login

animated, every element that applies the animate.css effect must add this class name;

bounce, just select the class name of the effect you want to add.

If you want to dynamically add an animation style to an element, you can do it through jquery

$(&#39;#element&#39;).addClass(&#39;animated bounce&#39;);

Copy after login

When animation After the effect is completed, you can also add an event through the following code

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend&#39;, function);

Copy after login

Note

When the effect is completed, the element is still It occupies space in the document flow (even if you can no longer see the element), so if you want the element to really disappear, hide the element when the animation is completed, such as:

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
 animationend&#39;, function(){$(this).hide();});

Copy after login

(Learning video sharing : css video tutorial, html video tutorial)

The above is the detailed content of What does animate.css mean?. For more information, please follow other related articles on the PHP Chinese website!