"."/> ".">

Maison  >  Article  >  interface Web  >  Que signifie animer.css ?

Que signifie animer.css ?

WBOY
WBOYoriginal
2022-09-14 17:01:192661parcourir

"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>
  • Ajouter le style d'animation spécifié à l'élément spécifié

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

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;);
  • 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);

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();});

(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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn