SVG : modifier le rayon et l'opacité d'un rond via CSS

Reprenons ce thème déjà traité en JS traditionnel, en JS jQuery et avec le SMIL.
Cette fois-ci nous allons animer le rond avec le CSS3 !

Le rond est de plus en plus grand, de plus en plus opaque et passe du rouge au vert puis c'est l'inverse.

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 400 400" style ="background : yellow" > <circle cx="200" cy="200" r='10' /> </svg>

On ne peut plus simple.

Le code CSS

@keyframes animer
	{ 
		0% {fill-opacity:0.1; transform :scale(1); fill:red ;}
		50% {fill-opacity :1 ; transform :scale(20) ; fill : green ; }
		100% {fill-opacity:0.1; transform :scale(1); fill: red ;}
	}
circle {animation : animer 20s 0s infinite linear;transform-origin : 50% 50%;}

Pour qu'il y ait seulement changement de rayon il faut règler l'origine de la transformation au centre du canevas avec la propriété transform-origin.

Le code CSS : autre solution

On aurait pu écrire l'animation CSS autrement :

	@keyframes animer
	{ 
		from {fill-opacity:0.1; transform :scale(1); fill:red ;}
		to{fill-opacity :1 ; transform :scale(20) ; fill : green ; }
	}
circle {animation : animer 10s 0s infinite linear alternate;transform-origin : 50% 50%;}

Quelques explications sont nécessaires ...
Au lieu d'une animation de 20 secondes qui agrandit puis réduit le rond je me contente d'écrire un "keyframes" qui se contente d'agrandir le rond. Mais quand j'applique ce "keyframes" à l'objet SVG circle je précise une animation de 10 secondes mais en "alternate".
alternate veut dire que le sens de lecture du modèle d'animation change à chaque cycle (sens normal puis sens inversé puis de nouveau sens normal et ainsi de suite.
Retour menu