SVG & CSS : animation automatique de clones

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

<svg viewBox ="0 0 600 400" width="80%" height ="auto" style ='background : lime ; box-shadow : 5px 5px 5px grey; '> <defs> <g id = 'voiture'> <rect x = '14' y ='2' width ='14' height ='8' fill = 'gray' /> <circle cx = '10' cy='20' r = '5' fill = 'silver' /> <circle cx = '30' cy='20' r = '5' fill = 'silver' /> </g> <g id ='auto_rouge'> <path d= 'M 0,20 v-10 h10 v-10 h 20 v 10 h 10 v 10 z' fill = 'red' /> <use xlink:href="#voiture" x="0" y="0" /> </g> <g id ='auto_jaune'> <path d= 'M 0,20 v-10 h10 v-10 h 20 v 10 h 10 v 10 z' fill = 'yellow' /> <use xlink:href="#voiture" x="0" y="0" /> </g> </defs> <use xlink:href="#auto_rouge" x="0" y="0" id ='automobile' /> <use xlink:href="#auto_jaune" x="90%" y="10%" /> </svg> <button onclick ="stop()">Suspendre animation</button> <button onclick ="go()">Reprendre animation</button>

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