Que signifie animer.css ?-Questions et réponses frontales-php.cn

Que signifie animer.css ?

WBOY

Libérer： 2022-09-14 17:01:19

original

2685 Les gens l'ont consulté

"animate.css" désigne une collection d'effets d'animation réalisés à l'aide d'animations en CSS3 ; "animate.css" prédéfinit de nombreuses animations couramment utilisées, adaptées à une utilisation rapide et faciles à modifier à la demande. class="nom de la classe d'effets animés">".

Que signifie animer.css ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

animate.css Qu'est-ce que cela signifie ?

animate.css est une collection CSS d'effets d'animation produits à l'aide de l'animation CSS3. Il contient de nombreuses animations prédéfinies couramment utilisées et est très simple à utiliser. Cet article présentera l'utilisation d'animate.css en détail

Animate.css est une bibliothèque CSS simple et efficace qui encapsule plusieurs animations simples et courantes, adaptée à une utilisation rapide et facile à modifier à la demande.

Importer un fichier

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

Copier après la connexion

Ajouter le style d'animation spécifié à l'élément spécifié

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

Copier après la connexion

animated, chaque élément qui applique l'effet animate.css doit ajouter ce nom de classe

bounce, sélectionnez Juste ; ajoutez le nom de classe de l’effet souhaité.

Si vous souhaitez ajouter dynamiquement un style d'animation à un élément, vous pouvez le faire via jquery

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

Copier après la connexion

Une fois l'effet d'animation terminé, vous pouvez également ajouter des événements via le code suivant

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

Copier après la connexion

Remarque

Lorsque l'effet est terminé, l'élément occupe toujours de l'espace dans le flux de documents (même si vous ne pouvez plus voir l'élément), donc si vous souhaitez que l'élément disparaisse vraiment, masquez-le lorsque le l'animation est terminée, comme :

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

Copier après la connexion

(Partage vidéo d'apprentissage : tutoriel vidéo css, tutoriel vidéo html)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!