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 :

<style type="text/css">
@keyframes mon_anim{
	0%{
		transform: translateY(10vh);
		opacity: 0;
	},
	100%{
		transform: translateY(0px);
		opacity: 1;
	}
}</style>

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.

<style type="text/css">
.message
{ 

	animation-name: mon_anim;
	animation-duration: 3000ms;
	animation-delay: 500ms;
	animation-timing-function: ease-in-out;

	animation-iteration-count: 1

}</style>

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-start et anim-duration).

Voici le code Html complet

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>CSS Transition with Javascript (No jQuery)</title>

	<style type="text/css">
	
	a{color: inherit;}
  
  	/* État original : */
	.message
	{ 
		display: block;
		transform: translateY(10vh);
		opacity: 0;
		color:#000;
	}
  
  	/* État final : */
	.message_animated
	{
		transform: translateY(0px);
		opacity: 1;
	}

	</style>

</head>

<body>

<div class="site">
	
	<div class="message" data-anim-start="3000" data-anim-duration="500">
		<span>Bonjour, voici mon message <a href="#">Lire la suite</a></span>
	</div>

</div>

<script type="text/javascript">
  
	// Div cible : 
	const  the_div 		= document.querySelector(".message");

	// Récupération des attributs Data :
	const  start_time 	= the_div.getAttribute("data-anim-start");
	const  duration	= the_div.getAttribute("data-anim-duration");

	setTimeout(function(){

	    // Démarrage de l'animation :
	    the_div.classList.add('message_animated');

	    // La transition :
	    const transition = "all " + duration + "ms ease-in-out";

	    // Appliquer les transitions :
		the_div.style.webkitTransition 	= transition;
		the_div.style.MozTransition 	= transition;
		the_div.style.msTransition 	= transition;
		the_div.style.OTransition 	= transition;
		the_div.style.fransition 	= transition;  

	}, start_time);
		
</script>

</body>
</html>
Dernière mise à jour le Auteur : Thomas Dufranne

Ce contenu vous a-t-il été utile ?

Merci pour votre avis !

Si vous pensez pouvoir aider d'autres personnes, pensez à partager le contenu

Merci pour votre avis !

Désolé que vous n'ayez pas trouvé votre réponse.

Je vous invite à me poser vos question par commentaire ou par e-mail !

Repondre

This site uses Akismet to reduce spam. Learn how your comment data is processed.