22: Animering av SVG med CSS - CSS-triks

Innholdsfortegnelse

Når du bruker innebygd SVG, er all den SVG-koden riktig i HTML, og dermed i DOM. Du kan style dem akkurat som du ville gjort ,

eller et annet HTML-element. CSS-styling gir muligheten for animasjoner og overganger.
Et enkelt eksempel:

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

A skrev opp hvordan du skal takle en litt mer kompleks design i denne opplæringen. Her er den demoen.

Se Pen Wufoo SVG-annonse av Chris Coyier (@chriscoyier) på CodePen.

I denne skjermsendingen lager vi en annen animert SVG-annonse for Wufoo, som begynner nesten fra bunnen av. Designet har noen skyer i seg som vi animerer å bevege oss etter og gjenta jevnt og uendelig.

Først brukte vi innebygd SVG og animerte den med CSS bare festet til det samme HTML-dokumentet. Men så, bare for å vise hvordan det fungerer, flyttet vi CSS til selve SVG, noe som er helt gyldig. Årsaken til at du kanskje vil gjøre det er fordi animasjonen kan kjøres selv når du bruker SVG som eller `background-image`.

Demo:

Se pennen kKdDj av Chris Coyier (@chriscoyier) på CodePen.

Nettleserstøtte for den animasjonen vil variere. I skrivende stund fungerte den bare i Chrome.