22: Animazione di SVG con CSS - Trucchi CSS

Quando usi SVG inline, tutto il codice SVG è proprio nell'HTML, e quindi nel DOM. Puoi modellarli proprio come faresti con un ,

o qualsiasi altro elemento HTML. Lo stile CSS offre la possibilità di animazioni e transizioni.
Un semplice esempio:

Visualizza il logo Pen CodePen come SVG in linea di Chris Coyier (@chriscoyier) su CodePen.

A ha scritto come affrontare un design leggermente più complesso in questo tutorial. Ecco quella demo.

Guarda l'annuncio SVG di Pen Wufoo di Chris Coyier (@chriscoyier) su CodePen.

In questo screencast realizziamo un'altra pubblicità SVG animata per Wufoo, partendo quasi da zero. Il design contiene alcune nuvole che animiamo per spostarci e ripetere in modo fluido e senza fine.

All'inizio, abbiamo utilizzato SVG in linea e lo abbiamo animato con CSS appena allegato allo stesso documento HTML. Ma poi, solo per mostrare come funziona, abbiamo spostato quel CSS all'interno dello stesso SVG, il che è completamente valido. Il motivo per cui potresti volerlo fare è perché l'animazione può essere eseguita anche quando usi SVG come o `background-image`.

Demo:

Guarda Pen kKdDj di Chris Coyier (@chriscoyier) su CodePen.

Il supporto del browser per quell'animazione varierà. Al momento della stesura di questo articolo, funzionava solo in Chrome.