22: Animering af SVG med CSS - CSS-tricks

Når du bruger indbygget SVG, er al den SVG-kode rigtig i HTML og dermed i DOM. Du kan style dem ligesom du ville en ,

eller ethvert andet HTML-element. CSS styling giver mulighed for animationer og overgange.
Et simpelt eksempel:

Se Pen CodePen-logoet som Inline SVG af Chris Coyier (@chriscoyier) på CodePen.

A skrev op, hvordan man tackler et lidt mere komplekst design i denne vejledning. Her er den demo.

Se Pen Wufoo SVG-annonce af Chris Coyier (@chriscoyier) på CodePen.

I denne screencast laver vi en anden animeret SVG-reklame for Wufoo, der starter næsten fra bunden. Designet har nogle skyer i sig, som vi animerer til at bevæge os forbi og gentage jævnt og uendeligt.

Først brugte vi indbygget SVG og animerede det med CSS, der netop er knyttet til det samme HTML-dokument. Men så, bare for at fremvise, hvordan det fungerer, flyttede vi den CSS til inden for selve SVG, hvilket er helt gyldigt. Årsagen til, at du måske vil gøre det, er, at så kan animationen køre, selv når du bruger SVG som eller `background-image`.

Demo:

Se Pen kKdDj af Chris Coyier (@chriscoyier) på CodePen.

Browsersupport til denne animation vil variere. På tidspunktet for denne skrivning fungerede det kun i Chrome.