22: Анимирање СВГ-а са ЦСС-ом - ЦСС-трикови

Када користите уграђени СВГ, сав тај СВГ код налази се тачно у ХТМЛ-у, а тиме и у ДОМ-у. Можете их обликовати баш као што бисте то урадили ,

, или било који други ХТМЛ елемент. ЦСС стил доноси могућност анимација и прелаза.
Једноставан пример:

Погледајте логотип Пен ЦодеПен као Инлине СВГ аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.

А написао је како се позабавити мало сложенијим дизајном у овом водичу. Ево те демонстрације.

Погледајте Пен Вуфоо СВГ оглас Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.

У овом сцреенцаст-у правимо још једну анимирану СВГ рекламу за Вуфоо, почевши скоро од нуле. Дизајн садржи неке облаке у којима анимирамо кретање и понављамо глатко и бескрајно.

У почетку смо користили уграђени СВГ и анимирали га ЦСС-ом који је управо приложен истом ХТМЛ документу. Али онда, само да покажемо како то ради, пребацили смо тај ЦСС у сам СВГ, што је потпуно валидно. Разлог зашто бисте то можда желели је тај што се тада анимација може покренути чак и када СВГ користите као или `background-image`.

Демо:

Погледајте оловку кКдДј Цхрис Цхрис-а (@цхрисцоииер) на ЦодеПен-у.

Подршка прегледача за ту анимацију ће се разликовати. У време писања овог текста, радио је само у Цхроме-у.