22: Анимиране на SVG с CSS - CSS-трикове

Съдържание:

Anonim

Когато използвате вграден SVG, целият този SVG код е точно в HTML и по този начин в DOM. Можете да ги оформите точно както бихте направили ,

или друг HTML елемент. CSS стилът носи възможността за анимации и преходи.

Един прост пример:

Вижте логото на Pen CodePen като Inline SVG от Chris Coyier (@chriscoyier) на CodePen.

A написа как да се справим с малко по-сложен дизайн в този урок. Ето тази демонстрация.

Вижте рекламата на Pen Wufoo SVG от Chris Coyier (@chriscoyier) на CodePen.

В този скрийнкаст правим поредната анимирана SVG реклама за Wufoo, започвайки почти от нулата. Дизайнът има някои облаци в себе си, които ние анимираме, за да се движим и повтаряме плавно и безкрайно.

Първоначално използвахме вграден SVG и го анимирахме с CSS, просто прикрепен към същия HTML документ. Но тогава, само за да покажем как работи, преместихме този CSS в самия SVG, което е напълно валидно. Причината, поради която може да искате да направите това, е, че тогава анимацията може да се изпълнява дори когато използвате SVG като или background-image.

Демонстрация:

Вижте Pen kKdDj от Chris Coyier (@chriscoyier) на CodePen.

Поддръжката на браузъра за тази анимация ще варира. По времето на това писане той работеше само в Chrome.

Файлове

  • 22-ad-1.svg