22: Анімація SVG за допомогою CSS - CSS-хитрощі

Коли ви використовуєте вбудований SVG, увесь цей SVG-код знаходиться прямо в HTML, а отже, і в DOM. Ви можете оформити їх так само, як і ,

, або будь-який інший елемент HTML. Стиль CSS надає можливість анімації та переходів.
Простий приклад:

Дивіться логотип Pen CodePen як Inline SVG від Chris Coyier (@chriscoyier) на CodePen.

У цьому навчальному посібнику A описано, як вирішити дещо складніший дизайн. Ось ця демонстрація.

Дивіться рекламу SVG Pen Wufoo від Chris Coyier (@chriscoyier) на CodePen.

У цьому скрінкасті ми робимо ще одну анімовану рекламу SVG для Wufoo, починаючи майже з нуля. У дизайні є кілька хмар, які ми оживляємо, щоб рухатися повз них і повторювати плавно і нескінченно.

Спочатку ми використовували вбудований SVG і анімували його за допомогою CSS, щойно приєднаного до того самого документа HTML. Але потім, щоб продемонструвати, як це працює, ми перенесли цей CSS у сам SVG, що є повністю дійсним. Причиною того, що ви можете зробити це, є те, що тоді анімація може працювати навіть тоді, коли ви використовуєте SVG як або `background-image`.

Демо:

Дивіться Pen kKdDj від Chris Coyier (@chriscoyier) на CodePen.

Підтримка браузера для цієї анімації буде різною. На момент написання цієї статті він працював лише в Chrome.