22: Animace SVG pomocí CSS - Triky CSS

Když použijete vložený SVG, celý tento SVG kód je přímo v HTML, a tedy v DOMu. Můžete je styl, stejně jako by to byla ,

nebo jakýkoli jiný prvek HTML. Styl CSS přináší možnost animací a přechodů.
Jednoduchý příklad:

Podívejte se na logo Pen CodePen jako Inline SVG od Chrisa Coyiera (@chriscoyier) na CodePen.

A v tomto tutoriálu napsal, jak řešit trochu složitější design. Tady je ukázka.

Podívejte se na reklamu Pen Wufoo SVG od Chrisa Coyiera (@chriscoyier) na CodePen.

V tomto screencastu vytváříme další animovanou SVG reklamu pro Wufoo, počínaje téměř od nuly. Návrh má v sobě nějaké mraky, které animujeme, abychom se pohybovali a plynule a nekonečně opakovali.

Nejprve jsme použili vložený SVG a animovali jsme jej pomocí CSS právě připojeného ke stejnému dokumentu HTML. Ale pak, abychom předvedli, jak to funguje, jsme přesunuli tento CSS do samotného SVG, což je zcela platné. Možná to budete chtít udělat proto, že pak může animace běžet, i když používáte SVG jako nebo `background-image`.

Ukázka:

Podívejte se na Pen kKdDj od Chris Coyier (@chriscoyier) na CodePen.

Podpora prohlížeče pro tuto animaci se bude lišit. V době psaní tohoto článku to fungovalo pouze v prohlížeči Chrome.