Анимируем SVG средствами CSS | OTUS

Курсы

Программирование
Highload Architect Node.js Developer React.js Developer Java Developer. Professional Android Developer. Basic Microservice Architecture Специализация Java-разработчик C++ Developer. Basic Специализация Fullstack developer JavaScript Developer. Professional Unity Game Developer. Basic Framework Laravel Алгоритмы и структуры данных Специализация PHP Developer C# Developer. Professional C# Developer. Basic Буткемп Frontend Developer Golang Developer. Professional iOS Developer. Basic Специализация Python Developer Архитектура и шаблоны проектирования MS SQL Server Developer Software Architect Rust Developer Базы данных Разработчик на Spring Framework Vue.js разработчик Разработчик IoT Подготовка к сертификации Oracle Java Programmer (OCAJP) Unity Game Developer. Professional PostgreSQL Cloud Solutions VR/AR - разработчик
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02

Анимируем SVG средствами CSS

SVG-элемент можно анимировать таким же образом, как это происходит с HTML. Для создания анимаций используется @keyframes. В принципе, в сети множество руководств на тему CSS-анимации при этом всё, что там описывается, по сути, применимо и к SVG-формату. Но давайте всё же приведем несколько примеров.

1-1801-a68d26.png

Итак, SVG-документ характеризуется наличием внутренних таблиц стилей, и именно в них и следует писать анимацию:

1-1801-f356d9.png

Собственно говоря, выполнить анимацию SVG-атрибута так же просто, как и в случае с CSS-атрибутами. Обратите внимание, что значения можно задавать как в процентах, так и с помощью конструкции from-to:

2-1801-993dc1.png

Далее останется просто применить к нужному элементу созданные анимации:

3-1801-fb5836.png

Однако все вышесказанное представляет собой статичные анимации. Но что прикажете делать, если нужна интерактивность? Не очень много, но тем не менее кое-что можно сделать интерактивным даже на CSS. К примеру, мы можем воспользоваться transition в сочетании с псевдоклассом hover:

4-1801-27934c.png

При имплементации примера выше, в случае наведения на элемент он поменяет свой цвет с синего на голубой за 3 секунды.

Итак, анимация атрибутов, как и небольшой кусочек интерактивности, это, по большему счету, основное, что можно сказать об особенностях CSS-анимации. Однако даже этого функционала вполне достаточно в большинстве случаев, ведь многие задачи сводятся к анимации какого-нибудь атрибута. При этом почти любой SVG-атрибут вы можете анимировать. Почему «почти»? Потому, что если вы выберете случайный атрибут, который окажется неанимируемым, то вам очень «повезло», т. к. это большая редкость.

По материалам https://habr.com/ru/post/450924/.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться