Maison > Article > interface Web > Que signifie animer.css ?
Que signifie animer.css ?
- WBOYoriginal
- 2022-09-14 17:01:192679parcourir
"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">".
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
$('#element').addClass('animated bounce');
Une fois l'effet d'animation terminé, vous pouvez également ajouter des événements via le code suivant
$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 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 :
$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
animationend', 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!