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>