Le problème

La fonction fadeIn() de jQuery et les animations css3 ne font pas bon ménage si l’élément sur lequel est appelé fadeIn() contient un autre élément animé via une animation css3.
Un overlay avec un spinner (pour indiquer à l’utilisateur le chargement de quelquechose) pourrait être une bon exemple :

Du html :

<div id="overlay">
	<div id="spinner"></div>
</div>

Des css :

#overlay{
...
}

#spinner{
	animation: rotation 3s infinite linear;
}

@keyframes rotation{
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

Du javascript :

$('#overlay').fadeIn();

Et la c’est le drame… pas de joli fadeIn, juste une apparition sèche :(

La solution

La solution consiste simplement à appliquer l’animation css3 après le fadeIn() dans le callback de la fonction. Pour se faire, l’animation est déclenchée par l’ajout d’une classe à l’élément animé… on modifie les css en conséquence :

#spinner{
	/* suppression de l'animation qu'on déporte dans une classe */
}

#spinner.animated{
	animation: rotation 3s infinite linear;
}

et on modifie le javascript :

$('#overlay').fadeIn(function(){
	$('#spinner').addClass('animated');
});

Et hop tout rentre dans l’ordre :)

Happy coding !