22: Animering av SVG med CSS - CSS-tricks

När du använder inbyggd SVG är all den SVG-koden rätt i HTML och därmed i DOM. Du kan utforma dem precis som du skulle ,

eller något annat HTML-element. CSS-styling ger möjlighet till animationer och övergångar.
Ett enkelt exempel:

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

A skrev upp hur man tar itu med en lite mer komplex design i denna handledning. Här är den demo.

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

I den här screencasten gör vi en annan animerad SVG-annons för Wufoo, som börjar nästan från grunden. Designen har några moln i sig som vi animerar att gå förbi och upprepa smidigt och oändligt.

Först använde vi inbyggd SVG och animerade den med CSS precis bifogat samma HTML-dokument. Men sedan, bara för att visa hur det fungerar, flyttade vi den CSS till själva SVG, vilket är helt giltigt. Anledningen till att du kanske vill göra det är att då kan animationen köras även när du använder SVG som eller `background-image`.

Demo:

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

Webbläsarstöd för den animeringen varierar. När detta skrivs fungerade det bara i Chrome.