Blog Web & Design

Comment déclencher une animations en CSS avec JavaScript

Contrôler le déclenchement d’une animation CSS je vous conseille de passer par du javascript. Voici une solution rapide et sans jQuery.

La solution pure CSS

Lorsque l’on souhaite créer une animation avec CSS, il est possible d’utiliser les @keyframes{} qui permettent de définir une suite de modifications à apporter à l’élément animé. comme ceci :

Une fois l’animation définie, on peut l’appliquer à un élément Html, tout en précisant qu’elle ne doit se jouer qu’une seule fois grâce à la propriété CSS animation-iteration-count, et même en y ajoutant un délai avant son lancement avec un animation-delay.

Cette solution uniquement basée sur CSS a un soucis majeur, elle ne permet pas de gérer ce qu’il se passe avant le delais de lancement, ainsi, si on souhaite afficher un element masqué avec un temps de latence, on se retrouve à voir l’element (avant le delais), puis le masquer pour lancer l’animation.

La solution CSS + JS

L’avantage de la solution utilisant javascript est de pouvoir gérer le temps d’attente avant le lancement de l’animation, et la durée de la transition directement dans le html, grace aux attributs de type data (anim-star et anim-duration).

Voici le code Html complet

Dernière mise à jour le Auteur : Thomas Dufranne

Repondre

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.