Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 facilitent 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 avec Firefox. Car ce dernier navigateur n'a 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.

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.

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" ; le rythme de la transformation ne sera pas constant mais "ease" (rapide au départ et lent à la fin).

Solution alternative

Vous comprenez qu'il est encore prématuré de publier des animations basées sur le SVG2 puisqu'un seul navigateur 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

On pourrait imaginer aussi une solution CSS reposant sur des transformations (translate & scale).
Cependant pour l'exemple 1 comme le chemin de déplacement est complexe (V ou V inversé) la translation à programmer dans le cadre d'un "keyframes" est délicate ...