22: Анимация SVG с помощью CSS - CSS-хитрости

Когда вы используете встроенный SVG, весь этот SVG-код находится прямо в HTML и, следовательно, в DOM. Вы можете укладывать их так же , как вы бы ,

, или любой другой элемент HTML. CSS-стиль дает возможность анимации и переходов.
Простой пример:

См. Логотип Pen CodePen как встроенный SVG Криса Койера (@chriscoyier) на CodePen.

В этом уроке A написал, как решить более сложный дизайн. Вот эта демонстрация.

См. Объявление Pen Wufoo SVG Криса Койера (@chriscoyier) на CodePen.

В этом скринкасте мы делаем еще одну анимированную SVG-рекламу для Wufoo, практически с нуля. В дизайне есть несколько облаков, которые мы анимируем, чтобы плавно и бесконечно перемещаться и повторять их.

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

Демо:

См. Pen kKdDj Криса Койера (@chriscoyier) на CodePen.

Браузер поддерживает эту анимацию по-разному. На момент написания этой статьи он работал только в Chrome.