Animation d'un objet SVG avec CSS

Le thème évoqué ci-dessous sera repris dan la partie "animer avec le SMIL !

Maintenant que les propriétés CSS transform, transition, animation sont bien implémentées ; rien n'interdit d'animer un objet SVG en CSS avec un "keyframes" (modèle d'animation) !

L'animation 3D

Le code de cette page

Le code SVG

<svg width ="90%" height ="auto" viewBox ="0 0 900 600" style ="background-image :url(../images/piste.svg); background-size :cover;" > <defs> <g id ="avion" > <line x1="0" y1="70" x2="260" y2="70" stroke="lightgrey" stroke-width ="4px" stroke-linecap = 'round'/> <line x1="130" y1="0" x2="130" y2="40" stroke="lightgrey" stroke-width ="2px" stroke-linecap = 'round'/> <line x1="80" y1="20" x2="180" y2="20" stroke="lightgrey" stroke-width ="2px" stroke-linecap = 'round'/> <circle cx="130" cy ="60" r ="30" fill ="lightgrey" /> <circle cx="130" cy ="65" r ="2" fill ="grey" /> <circle cx="80" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="180" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="80" cy ="90" r ="10" fill ="gray" /> <circle cx="180" cy ="90" r ="10" fill ="gray" /> <line x1="100" y1="70" x2="100" y2="100" stroke="lightgrey" stroke-width ="2px" /> <line x1="160" y1="70" x2="160" y2="100" stroke="lightgrey" stroke-width ="2px" /> <line x1="110" y1="90" x2="110" y2="110" stroke="darkgrey" stroke-width ="6px" /> <line x1="150" y1="90" x2="150" y2="110" stroke="darkgrey" stroke-width ="6px" /> <polygon points ="130,30 155,50 105,50" fill ="black" /> <line x1="130" y1="30" x2="130" y2="50" stroke="lightgrey" stroke-width ="2px" /> </g> </defs> <use xlink:href ="#avion" id ="jet" x ="250" y ="250" /> </svg>

On définit un modèle d'avion avec la balise defs que l'on clone et positionne dans le canevas via la balise use.
Le clone est identifié jet.

Le code CSS

@keyframes animer 
{
	0% {transform : scale(0.1) ;}
	25% {transform : scale(0.4) ;}
	50% {transform : scale(0.8) ;}
	75% {transform : scale(1) ;}
	100% {transform : scale(1.4) ;}       
}
#jet {animation : animer 16s 0s 1 linear forwards ;}

On décrit un "keyframes" (ou modèle d'animation) avec 5 étapes reposant sur la propriété transform avec la commande scale.
Ce modèle d'animation est appliqué à l'élément identifié jet (l'avion dessiné via SVG ).
Remarquez que le raccourci animation comprend comme paramètre "1" (et non pas "infinite") donc l'animation ne s'exécute qu'une fois.

Durant le cycle le jet grandit et se déplace alors que l'on a "programmé" seulement qu'un changement d'échelle ...
Ceci mérite une explication.

Par défaut le point d'origine d'une transformation CSS d'un élément HTML est son centre (valeurs par défaut de transform-origin : center center).
Mais pour un objet SVG c'est différent ! Le point d'origine d'une transformation CSS est l'angle haut gauche du canevas. Donc ici le changement d'échelle s'applique non seulement aux dimensions de l'avion mais aussi à ses coordonnées X,Y.

Ici ce n'est pas génant car nous voulons que l'avion grandisse et qu'il se déplace mais si nous voulions uniquement un changement de taille de l'objet ...
Rassurez vous il y a une solution. Voir la page suivante.

Le code HTML

L'animation dure 16 secondes et ne s'applique qu'une fois d'après le CSS.
Mais dans la partie HEAD de la page j'ai rajouté l'instruction HTML suivante :

<meta http-equiv ="Refresh" content ="18" />

La page est donc rechargée toutes les 18 secondes ; La répétition de l'animation est donc gérée par le HTML.

Attention je ne veux pas dire que c'est le mode de répétition qu'il faut privilégier !. Il faut en effet éviter le rechargement d'une page surtout lorsque celle-ci est volumineuse ...
La répétition de l'animation pouvait bien sûr être gérée avec un paramètre de la propriété animation !
Retour menu