Utiliser animate.css – Animations CSS3

animate.css est une feuille de style qui utilise les animations CCS3. Celles-ci sont obtenues en appliquant des classes CSS définissant ces transitions/animations.

<a href="https://daneden.github.io/animate.css/">animate.css</a>
animate.css

On applique la classe animated et celle de l’effet voulu à l’élément que l’on veut animer, par exemple shake.

Sur un élément de formulaire  input :

En rafraichissant la page, l’effet shake se produit sur l’input. Une fois seulement. La durée de l’animation est 1s au minimum, chaque effet peut redéfinir la durée de l’animation. La classe infinite permet de boucler sur l’animation.

Utilisation de jQuery pour contrôler les effets après un événement.

On définit un bouton et un input, pour appliquer l’effet sur l’input lorsque l’on clique sur le bouton­ :

L’input s’anime lorsque l’on clique sur le bouton. Si l’on clique une seconde fois, rien ne se passe. Il faut enlever les classes animated et shake à la fin de l’animation pour pouvoir les ré-appliquer et reproduire l’effet par un nouveau clic sur le bouton.

Pour détecter la fin de l’animation, on applique à l’élément l’événement animationend. Les événements sont destinés au différents navigateurs.

one() permet de rattacher des événements pour qu’ils ne s’exécutent qu’une seule fois.

En optimisant un peu le code pour ne plus avoir à changer l’effet dans addClass() mais seulement dans la définition de l’effet, on obtient :

Et hop, on contrôle avec jQuery des animations CCS3.

1 commentaire

Trackbacks/Pingbacks

  1. AnimateCSS : plugin pour jQuery - Murviel Info - […] avoir fait un article expliquant l’utilisation de animate.css avec jQuery il était bon d’écrire un […]

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *