22: Animation de SVG avec CSS - Astuces CSS

Lorsque vous utilisez SVG en ligne, tout ce code SVG se trouve dans le HTML, et donc dans le DOM. Vous pouvez les coiffer comme vous le feriez a ,

, ou tout autre élément HTML. Le style CSS offre la possibilité d'animations et de transitions.
Un exemple simple:

Voir le logo Pen CodePen en SVG en ligne par Chris Coyier (@chriscoyier) sur CodePen.

A a écrit comment aborder une conception légèrement plus complexe dans ce didacticiel. Voici cette démo.

Voir la pub SVG Pen Wufoo de Chris Coyier (@chriscoyier) sur CodePen.

Dans ce screencast, nous faisons une autre publicité SVG animée pour Wufoo, en partant presque de zéro. Le design contient des nuages que nous animons pour se déplacer et répéter en douceur et sans fin.

Au début, nous avons utilisé le SVG en ligne et l'avons animé avec du CSS juste attaché au même document HTML. Mais ensuite, juste pour montrer comment cela fonctionne, nous avons déplacé ce CSS dans le SVG lui-même, ce qui est tout à fait valide. La raison pour laquelle vous voudrez peut-être faire cela est que l'animation peut alors s'exécuter même lorsque vous utilisez le SVG en tant que ou `background-image`.

Démo:

Voir le Pen kKdDj de Chris Coyier (@chriscoyier) sur CodePen.

La prise en charge du navigateur pour cette animation variera. Au moment d'écrire ces lignes, cela ne fonctionnait que dans Chrome.