Tutoriel CSS - sommaire

CSS : superbes animations SVG avec CSS

Dans les pages précédentes, je vous ai montré comment animer via CSS des éléments HTML.
Avec des astuces on arrive à transformer une boite en un rond ou en une ellipse mais les possibiltés de dessin en HTML sont quand même limitées. Il est impossible de produire des formes complexes alors que le langage SVG est vraiment dédié au dessin.
Donc pour créer animations de formes complexes, il est préférable de produire des éléments SVG et de les animer via CSS. D'autant que la version 2 de SVG présente de nombreuses innovations qui faciliteront le travail du développeur.

SVG version 2

Les navigateurs commencent à implémenter la version 2 de SVG.
Parmi les innovations, les paramètres géométriques (with, height, x, y, cx,cy, r, rx, ry,etc.) peuvent aussi être manipulées comme des propriétés CSS. Alors qu'en SVG 1, ces paramètres géométriques doivent être passés obligatoirement en attributs.
Donc dans le cadre d'un "keyframes" (modèle d'animation) CSS on pourra donc modifier la taille et la position d'un élément SVG préalablement défini.

Exemple 1

Ci-dessous une animation SVG via CSS.

Deux boules (une rouge et une blanche) qui se déplacent sur un billard.

Cette animation fonctionne avec Chrome mais pas sous Firefox ; ce dernier n'ayant pas encore commencé à implémenter la version 2 de SVG.

Le code correspondant

Il faut encoder en SVG et en CSS.

Le code SVG

Dans la partie BODY de la page. <svg width ="100%" viewBox ="0 0 900 300" style ="background : lime ; border : 10px solid maroon ; box-shadow : 5px 5px 5px gray;"> <circle r ="10" cx ="10" cy ="10" fill ="red" id ="rouge"/> <circle r ="10" cx ="890" cy ="290" fill ="white" id ="blanche"/> </svg>

Je crée un canevas SVG que je style via le CSS. Je peux appliquer à la balise SVG les propriétés background, border, box-shadow car c'est un élément HTML !
Dans cette zone de dessin je dessine et positionne deux boules identifiés "rouge" & "blanche" (balise circle du langage SVG)
Notez les attributs de taille et de position pour ce type de forme : cx, cy, r.

Il y a dans mon site tout un tutoriel sur SVG : Dessiner avec SVG

Le CSS

Dans le conteneur STYLE de la partie HEAD on va trouver des modèles d'animation ("keyframes") et des règles de style basées sur le raccourci "animation". @keyframes deplacer1 { 0% {cx : 10 ; cy : 10; } 50% {cx : 450 ; cy : 290 ; } 100% {cx : 890 ; cy :10;} } #rouge {animation : deplacer1 10s 0s infinite linear alternate ;} @keyframes deplacer2 { 0% {cx : 890 ; cy :290; } 50% {cx : 450 ; cy : 10 ; } 100% {cx : 10 ; cy :290;} } #blanche {animation : deplacer2 10s 2s infinite linear alternate ;}

L'animation des deux cercles SVG (et plus précisément leurs déplacements) c'est le "job" de CSS :
• deux "keyframes" dans lesquels les valeurs cx & cy changent (c'était impossible avec SVG 1)
• Le premier modèle d'animation "deplacer1" est appliqué à l'élément "rouge"
• le deuxièmèe modèle "deplacer2" est appliqué à la boule blanche

Exemple 2

Un carré violet très opaque se transforme en rond transparent puis le cylce recommence en sens inverse.

Cette animation ne fonctionne qu'à moitié avec Firefox : la variation de l'opacité s'applique.
Cette animation est "plate". Pour lui donner un peu de relief, il suffirait d'ombrer le canevas la forme.
Ombrer un élément SVG c'est très simple avec la librairie JS Snap SVG.

Le code correspondant

Le SVG

On dessine un carré identifié "carre" centré dans le canevas SVG.

Le CSS

Le modèle d'animation ne comporte que deux étapes donc on peut remplacer les pourcentages par les mots clés "from" et "to".
Pour transformer un carré en rond il suffit de créer des coins arrondis : paramètres rx & ry.
Là encore des paramètres géométriques sont passés en propriétés CSS.
On applique ce modèle à l'élément SVG "carre via le raccourci "animation".

Solution alternative

Vous comprenez qu'il est encore prématuré de publier des animations basées sur le SVG 2 puisqu'un seul navigateur (mais le leader) a commencé à implémenter cette version.

Reprenons l'exemple 1, l'alternative est alors d'employer le SMIL (langage d'animation du SVG). Il faut utiliser la balise animateMotion du SMIL pour déplacer les boules le long d'un chemin.

Pour l'exemple 2, la solution alternative consiterait à manipuler les attributs rx & ry dans le cadre de la balise animate du SMIL. Le SMIL est évoqué dans le cadre du tuto sur SVG : Balise animate du SMIL