SVG & CSS : animer un groupe de formes

Nous reprenons un thème déjà traité en JS traditionnel et en JS jQuery. Maintenant vous allez découvrir la solution CSS !

Le code SVG & HTML

On va animer le clone identifié "automobile" (clone rempli de rouge).

Le code CSS

	@keyframes deplace
	{ 
		0% {transform : translate(0,0);  }
		100% {transform : translate(560px,360px); }
	}
	#automobile {animation : deplace 10s 0s infinite linear alternate forwards running;}

Pour comprendre le sens de toutes les valeurs de la propriété animation visitez le tuto "tutoriel CSS3".

Le script jQuery

	function stop()
	{	$("#automobile").css("animationPlayState","paused"); }
	function go()
	{	$("#automobile").css("animationPlayState","running"); }

Via jQuery on modifie la propriété CSS animation-play-state de l'objet identifié "automobile".
Cette propriété permet d'arrêter ou de reprendre l'animation CSS appliquée à cet objet.

Attention écrivez les propriétés de style avec la syntaxe JS : supprimer les tirets et remplacer la lettre qui suit par une majuscule.
Retour menu