Animation d'un objet SVG avec CSS

Le thème évoqué ci-dessous sera repris dans 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>

La zone de dessin SVG a pour fond une image SVG : "piste.svg".
Je rappelle que l'on peut appliquer la propriété "background" à la balise SVG car il s'agit d'un élément HTML !!!

On définit un modèle d'avion avec la balise defs que l'on clone et positionne dans le canevas avec 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.

Nous voulons non seulement un changement d'échelle mais aussi une translation à partir du coin haut gauche.
Donc la valeur par défaut du point d'origine de la transformation nous convient parfaitement.

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 ="20" />

La page est donc rechargée toutes les 20 secondes ; La répétition de l'animation est donc gérée par le HTML.
Comme l'animation CSS proprement dite dure 16 secondes,le jet reste à l'atterrisage 4 secondes.

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