Анимация SVG с помощью CSS


Оглавление (нажмите, чтобы открыть):

Про CSS

Анимированные SVG-маски

В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.

Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.

Обводками можно в какой-то степени имитировать трансформации в масках, и, таким образом, получить много разных интересных эффектов.

Пример простой маски:

See the Pen hatEx by yoksel (@yoksel) on CodePen.

Как она устроена?

Внутри две линии. Я не использовала path , потому что ему нельзя задать координаты в процентах.

В исходном состоянии линии не видны, потому что stroke-width: 0 . Для того, чтобы обводки в процессе анимации служили видимой областью маски, им задан белый цвет stroke: #FFF . Также задана анимация, которая увеличивает толщину рамки до 300.

Если вытащить маску наружу, она будет выглядеть вот так:

See the Pen CbDFK by yoksel (@yoksel) on CodePen.

Отображается только то, что попадает под белые области. Линии увеличиваются за счет обводки и показывают содержимое под собой.

Маска применяется к фигуре с помощью атрибута mask=»url(#m-line)» или через CSS: mask: url(#m-line);

Понимая принцип работы такой маски, можно сделать много других вариантов.

Простое разворачивание из центра:

Использование паттернов позволяет делать узорные маски.

Паттерны позволяют добиться интересного результата минимумом фигур, но ещё интереснее можно сделать, если задать несколько фигур внутри маски и анимировать их по отдельности.

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

Да и вообще, необязательно это должны быть линии:

Помимо преимуществ, анимированные SVG-маски имеют некоторые проблемы. Связаны они не столько с масками, сколько с анимацией. Во-первых, анимации SVG-элементов не поддерживаются в IE. Вторая проблема — производительность. Насколько мне известно, на данный момент анимации SVG-элементов не оптимизируются браузерами, поэтому имеет смысл анимированный SVG применять умеренно и аккуратно.

Мне не приходилось использовать подобные маски в практических целях, но предполагаю, что с их помощью можно будет делать эффектные слайдеры и фотогалереи.

Как создать анимированный логотип с помощью SVG и CSS

Доброго дня всем читателям. Небольшой набор качественной анимации, присутствующей на вашем сайте, должен вызвать положительные эмоции у ваших посетителей, ведь весь интернет медленно движется в сторону использования HTML5 для веб-анимации, но, стоит помнить, что ее использование также может привести к возникновению некоторых сложностей.

SVG (масштабируемая векторная графика) дает нам неплохую альтернативу, так как позволяет использовать великолепный API среди прочих преимуществ, и такую графику можно анимировать, используя капельку CSS-креатива.

В этой статье мы научим вас работать с SVG и комбинировать этот формат с CSS для создания анимированного логотипа.

Почему масштабируемая векторная графика такая классная

Несмотря на свое название — Scalable Vector Graphics, это вообще не графический формат, а язык XML-разметки (очень похоже на XHTML или XOXO). Этот специфический язык разметки используется для создания векторных двухмерных изображений, которые можно уменьшать или увеличивать без потери резкости. Перед тем как мы начнем говорить о его свойствах, давайте посмотрим на код, лежащий за простым SVG-файлом, Пример ниже воссоздает копию лого Adobe, используя для этого векторную обводку и атрибут заполнения для раскрашивания. Вы можете спокойно скопировать эту картинку, используя ваш любимый текстовый редактор (сохраняем, как файл .svg).

Как вы можете заметить, такие изображения, изменяющие свой размер без потерь качества, могут пригодиться при строительстве отзывчивого сайта. Как бы то ни было, если графические изображения векторные, то, когда речь идет о сложных изображениях, они требую неоправданно большое количество данных. Из-за этого факта, SVG широко используется только в логотипах, инфографиках или обычных графиках.

Кроме того, вы также можете использовать встроенные графические эффекты (например, фильтры или режимы смешивания), а также доступный DOM API. Если вы уже знакомы с CSS и JavaScript, то вам будет просто управляться с файлами SVG. Их гибкость позволяет вам, например, создавать SVG-файлы на стороне сервера и модифицировать их, не имея доступа к специальным инструментам (о которых мы поговорим позже).

SVG можно легко анимировать, используя CSS, но сначала давайте узнаем, как работать с SVG, используя специальные инструменты.

Как работать с SVG

Как упоминалось выше, вы можете работать с SVG и голыми руками, но зачем, если есть замечательные инструменты для создания и манипулирования SVG-файлами, которые позволяют ограничить работу с кодом простым редактированием CSS и анимации.

Adobe Illustrator, Inkscape и Sketch для Mac – это самые популярные решения. В случае с Illustrator процесс создания файлов очень прост, так как готовые изображения можно экспортировать, используя опцию ‘Save as’ SVG. В процессе сохранения вы можете заметить опцию, которая называется SVG Profiles, с несколькими вариантами, перечисленными в выпадающем меню: SVG Tiny (лучше всего подходит для смартфонов) и SVG Basic(профиль, который используется для PDA), но мы будем использовать SVG 1.1.

Единственный минус использования данных инструментов заключается в том, что они добавляют много метаданных в сопутствующий код, что приводит к созданию слишком тяжелые файлов. Так что масштабируемую векторную графику в большинстве случаев нужно оптимизировать перед тем, как использовать ее на своем сайте.

Давайте рассмотрим в качестве примера SVG-файл с Android-лого до и после оптимизации:

Мы удалили пробелы, дефолтные атрибуты, стили и прочие ненужные данные, и вот, что получилось:

Хотя исходный файл SVG и так был вполне компактен для начала работы (0.5kB), процесс оптимизации позволил уменьшить размер файла на 12.5% (стало 0.4kB). В случае более сложных изображений, вы заметите более внушительное уменьшение размера фала и увеличение скорости загрузки сайта при наличии там SVG-элементов.

Для упрощения этого процесса мы советуем использовать инструменты типа SVG Optimizer (доступен онлайн) и SVGO, который использует app. с открытым исходным кодом и создан на базе Node.js.

Теперь давайте посмотрим, как мы можем использовать CSS для анимации графики, созданной с использованием этого языка разметки.

Создание анимированного лого с использованием SVG и CSS

SVG имеет нативный синтаксис исключительно для анимации, который называется SMIL и позволяет вам анимировать атрибуты вашей графики напрямую с использованием XML-разметки.

Но, стоит заметить, что Internet Explorer никогда не предоставлял поддержку для SMIL, а разработчики Chrome говорят об отказе от поддержки этого синтаксиса в пользу CSS и веб-анимации.

Давайте взглянем на некоторые примеры. Помните SVG Adobe-лого, которое мы представили ранее? Мы будем использовать простую мигающую анимацию и эффект перехода для изменения его цвета. Мы начнем с обозначения класса векторного контура, а затем добавим эффекты в этот класс в наш файл стилей. Вот как будет выглядеть HTML:

SVG анимация

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами и

Для примера я скачал svg картинку

Нам необходимо выполнить следующие действия:

  • загрузить svg изображение на страницу с помощью тега
  • сгруппировать необходмые слои для дальнейшей работы
  • создать анимацию с помощью @keyframes
  • реализовать выполнение анимации при клике на SVG картинку


Все манипуляции с SVG будем выполнять прямо внутри самого изображения. Таким образом нашу SVG анимацию можно будет использовать в других проектах.

1. Подключение svg с помощью тега

2. Объединие нужных слоёв в группу

Чтобы сгруппировать необходимые элементы, обернём их в тег

Для проверки, верно ли мы объединили элементы, зададим группе какой-нибудь цвет, например зелёный

3. Создание SVG-анимации

Будем писать css код прямо внутри SVG, это позволит использовать изображение независимо от данного проекта.

CSS и JavaScript будем писать в теге . Данный тег скрывает внутреннее содержимое от браузера и используется для создания эффектов и изменения стилей

Нижний блок кода необходим для того чтобы, когда мы будем нажимать на SVG картинку, то ей будет добавляться >addAnimation , на который мы повешали проигрывание анимации

Так же я использовал два айдишника, из которых, первый — я дописал самой svg картинке, второй — группе элементов, которую будем анимировать

4. Выполнение анимации при клике на SVG картинку

Внутри тега defs под style будем писать js-код в теге script

Анимация SVG с помощью CSS

В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

Мастер Йода рекомендует:  Как сделать отступы или табуляцию в HTML

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

Зум слайдер

Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.

Анимация значения text в SVG

Есть ли в SVG возможность, при помощи тега animate , animateTransform , set или какого-нибудь другого тега, реализовать анимацию смены текста с одного на другой?

2 ответа 2

Текст в SVG, как любой другой графический элемент имеет координаты X и Y с помощью которых он позиционируется на холсте svg.

Изменяя эти координаты с помощью команд анимации можно как угодно анимировать движение текста.

  • Дискретное перемещение текста

Для этого добавляется атрибут alcMode=»discrete»

  • Замена слов после наведения курсора begin=»gr1.mouseover» и увода курсора begin=»gr1.mouseout»
  • Плавное, построчное движение слов вверх

Используется команда анимации движения вдоль пути

  • Движение с остановками на каждой фразе

Создаем SVG анимацию через CSS и JS

Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
S calable V ector G raphics — масштабируемая разметка в екторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.

Формат SVG имеет ряд достоинств:

Файлы SVG можно читать и редактировать с помощью обычных текстовых редакторов. SVG хорошо поддаются сжатию. Они меньше по размеру, чем сравнимые изображения форматов JPEG и GIF.


SVG — векторный формат, а это позволяет масштабировать изображение без потери качества.

Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.

SVG — открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.

Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.

Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.

И несколько недостатков, куда же без них:

Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.

Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.

Пример SVG кода:

Исполнение данного кода:

В даном изображении можно просто изменить параметры в коде. Для примера — картинка с изображением занимает 35.5 КБ, а код SVG — 426 байт.

И вот мы плавно подошли к разговору использования SVG-анимации (SMIL). SVG-графику можно анимировать с помощью нескольких анимационных элементов. Например, с использованием таблиц стилей CSS.

Так зачем же разработчику использовать SMIL? Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.

Целевой объект анимации задается с помощью xlink:href.

Если атрибут xlink:href не задан, то целевым элементом становится родительский элемент:

Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.

Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера:

В течение 5 секунд (dur=»5s»), после клика на синий круг (begin=»click»), он будет двигаться по оси Y, начиная с точки from=»300″ в точку to=»100″. После выполнения — анимация остановится в конечной точке (fill=»freeze»). Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount=»indefinite».

Также, можно задать начало выполнения анимации после загрузки страницы. Или же подключить функцию по истечению некоторого времени после загрузки, добавить анимацию элемента страницы с задержкой после клика и тому подобное.

В действительности, SVG-анимация очень большая тема. Можно написать огромную статью с примерами кода и их выполнением, но, вместе с тем, некоторые возможности остаются недоступными. В том числе — анимация текста. Но это уже совсем другая история, исследовать которую мы будем в следующих статьях блога.

SVG анимация. С Vivus.js это просто! SVG анимация и примеры кода.

Vivus.js — это легкий класс JavaScript (без зависимостей), который позволяет вам создавать крутую SVG анимацию, придавая им ей, который вы рисуете. Доступно множество различных SVG анимаций, а также возможность создать собственный скрипт для рисования SVG любым удобным для вас способом. SVG анимация выглядит потрясающе с Vivus.js!

VIVUS

  • Demo: https://maxwellito.github.io/vivus/
  • GitHub: https://github.com/maxwellito/vivus
  • Для создание простой анимации одного объекта SVG на основе CSS: Vivus Instant
  • Очистка SVG от мусора и уменьшение размера SVGOMG перед использованием в Vivus Instant

Попробуйте Vivus с вашим SVG на Vivus Instant. Если вы планируете использовать библиотеку для анимации одного SVG без обратного вызова или элементов управления, это позволит вам загрузить анимированный SVG на основе CSS без JavaScript.

SVG Анимация и её виды

На следующем изображении розовый цвет представляет значение длительности duration , а синий — значение задержки delay .

⇒ С задержкой (Delayed)

Каждый раз, когда у вас есть небольшая задержка на старте. В настоящее время это анимация по умолчанию.

⇒ Синхронно (sync)

Каждая линия рисуется синхронно. Все они начинаются и заканчиваются одновременно, отсюда и название синхронизации sync .

⇒ По одному (OneByOne)

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

SVG Анимация. Принципы работы

Чтобы получить этот эффект, скрипт использует CSS-свойство strokeDashoffset . Это свойство управляет смещением штриха в каждой строке SVG. Теперь все, что нам нужно сделать, это добавить немного JavaScript для постепенного обновления этого значения, и волшебство начинается.

Тем не менее, есть проблема с этим. Свойство strokeDashoffset доступно только для элементов пути. Это проблема, потому что в SVG есть много элементов, таких как круг circle , прямоугольни rect , линия line и полилиния polyline , которые нарушают анимацию. Поэтому, чтобы исправить это, в репозитории есть еще один класс, называемый pathformer . Это сделано для преобразования всех объектов вашего SVG в элементы пут path , чтобы иметь возможность использовать смещение штрихов strokeDashoffset и анимировать ваши SVG.

Анимация всегда рисует элементы в том же порядке, как они определены в теге SVG.

Есть несколько условий, которым должен соответствовать ваш SVG:

  • Все элементы должны иметь свойство обводки и не могут быть заполнены. Это связано с тем, что анимация выглядит только для постепенного рисования штрихов и не проверяет заполненные цвета. Например: fill: «none»; stroke: «#FFF»;
  • Вы должны избегать создания каких-либо скрытых элементов пути в вашем SVG. Vivus считает их всех подходящими для анимации, поэтому рекомендуется удалить их, прежде чем поиграть с ними. Если они не удалены, анимация может не достичь желаемого эффекта с появлением пустых областей и пробелов.
  • Текстовые text элементы не допускаются, они не могут быть преобразованы в элементы пути.

Код вдохновлен другими источниками. Пост вдохновлен прекрасными Codrops о посте SVG Drawing Animation (если вы не знаете этот веб-сайт, будьте готовы к тому, что ваш ум просто взорвется). Затем для Pathformer, есть много работы от SVGPathConverter от Waest.

Использование

Как я уже сказал, здесь нет никаких зависимостей. Все, что вам нужно сделать, это включить сценарии.

Эффект анимации рамки с помощью SVG и CSS

Дата публикации: 2014-03-27


От автора: Веб-сайт Карла Филипа Бреннена (Carl Philipe Brenner) отличается очень креативной и изящной анимацией, и сегодня мы собираемся разобраться, как воссоздать эффект анимации рамки, применив к линиям SVG переходы CSS.

Сегодня мы хотели бы разобраться в очень тонком, но интересном эффекте анимации рамки, которую можно видеть на креативном вебсайте Карла Филипа Бреннера (Carl Philipe Brenner). При проведении мышью над одним из белых элементов сетки портфолио вы увидите изящную анимацию: элемент сетки становится прозрачным, а линии рамки с каждой стороны начинают анимацию по часовой стрелке, создавая действительно красивый эффект. В данном случае он получается путем анимации ширины или высоты нескольких тегов span с помощью JS. Мы опробуем другой подход, применяющий SVG и переходы CSS. Пожалуйста, помните, что эта техника очень экспериментальна.

Сначала давайте рассмотрим основную концепцию, а затем двинемся к конечному эффекту. Пожалуйста, обратите внимание, что переходы CSS к SVG, которые мы применим, поддерживаются не во всех браузерах.

Когда смотришь на эффект, не сразу ясно, что происходит, но если внимательно глядеть только на одну сторону, скажем, на верхнюю линию рамки, то заметно, что сначала ширина белой линии уменьшается справа налево, и справа с небольшой задержкой, или брешью, появляется новая линия. Будучи добавленным ко всем сторонам, эффект создает иллюзию того, что верхняя линия как будто перемещается вокруг угла к левой стороне, левая сторона перемещается вниз и так далее.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Конечно, такой эффект можно создать без SVG, даже без дополнительных элементов, просто применив псевдоэлементы. Но здесь нужно разобраться, что можно сделать с помощью SVG, и как контролировать ее посредством CSS, а не через JavaScript.

Обдумывая, как создать этот эффект с помощью SVG, нам можно было анимировать stroke-dashoffset штриха прямоугольника или просто начертить линии. Но требовалось решение, не использующее JS, и после некоторых колебаний мы решили, что значения перехода stroke-dashoffset и stroke-dasharray в CSS могут оказаться весьма «глючными». Так что было решено попробовать другое решение, использовав линии и анимировав их перевод. (Можно представить себе другие подходы конкретно к этому эффекту, но нам понравилась идея перемещения линий, потому что ее довольно легко понять и выполнить в CSS, а также она создает возможность другой анимации, как видно из демопримера.)

Мастер Йода рекомендует:  Windows CGI интерфейс

Особенность линий, которые мы станем использовать, состоит в том, что они послужат в качестве трех состояний анимации. На самом деле они будут в три раза длиннее размера блока, в котором находятся. В середине линии будет зазор размером со сторону блока. Мы добьемся этого, установив значение stroke-dashoffset на длину стороны блока. Теперь весь фокус в переходе позиции линии:

У SVG будет размер блока, поэтому мы не увидим за штриховой линией переполнение. До того, как продолжить работу над следующими тремя линиями, давайте закодируем этот первый этап. Наша линия с SVG содержится в div:

Анимация svg с помощью css

Мне нужно анимировать (используя css) SVG, но я не хочу вставлять весь код SVG в страницу.

После просмотра способов включения моего svg в страницу и все еще будучи в состоянии оживить его единственным способом, который я мог найти, что не встраивал данные svg raw, был использовать объект, но любой css, который анимировал svg, должен был быть включен в теги стиля или связан с из файла svg. Это не было действительно вариантом для меня.

Затем я посмотрел на Snap, который работал хорошо, но затем я обнаружил, что могу просто загрузить внешний файл через jquery и анимировать с помощью CSS:

Мой вопрос в том, есть ли какие-то ограничения или вещи, которые я должен смотреть за тем, чтобы сделать это таким образом? Я пропустил что-то очевидное, я не видел примеров того, как это делается таким образом при чтении бесчисленных сообщений в блоге о svg animation.

1 ответ

Вы все еще должны быть в состоянии анимировать SVG с любой из функций CSS3, таких как transition or animation . обрабатывается так же, как обычные элементы DOM, так что до тех пор, пока у них есть правильные классы, и у них нет никаких style атрибутов, которые могут переопределить CSS, вы должны быть хорошими. Здесь есть хорошая презентация , которая рассказывает о встроенных стилях и о том, на что следует обратить внимание.

Также относительно вашего первого пункта, вы можете технически сделать это, но в идеале единственное реальное преимущество-это очистить ваш HTML, чтобы вы его не видели. Для этого необходимо дождаться загрузки JavaScript и контейнера в DOM, прежде чем он сможет загрузить SVG. Вы можете встроить свой SVG, но, как вы сказали, Вы не хотите. Вот почему люди используют PHP, который находится на стороне сервера, и оттуда они могут делать такие вещи, как

Таким образом, он все еще секционирован, но он не загружается динамически клиентом.

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

Animating SVG with CSS

April 4, 2020 11 min read 3204

Web animations are a delight. They improve the user experience, as they can provide visual feedback, guide tasks, and jazz up a website. There are several ways to create web animations, including JavaScript libraries, GIFs, and embedded videos. But the simple combination of SVG and CSS is appealing for a few reasons. Comprised of code instead of thousands of raster image frames, they’re performant and have a faster load time than bulky GIFs and videos. Plus, there are a lot of simple animations that can be created without the need to add yet another JavaScript plugin to your website’s page load. To boot, SVGs are vector based, so they scale flawlessly across screen sizes and zoom levels without creating crunchy pixelization.

Now, you may be wondering: Why CSS? Why not animate with SMIL, the native SVG animation specification? As it turns out, there’s declining support for SMIL. Chrome is heading in the direction of deprecating SMIL in favor of CSS animations and the Web Animations API. So, on we go with CSS animations…But how are they made? In this article, we will learn how to make these lightweight, scalable animations!

Common use cases for animating SVG with CSS

First, let’s look at some practical use cases for why you’d need animated SVGs in your web app or landing page.

Icons

Animated SVGs are great for icons that indicate micro-interactions and state changes. They also are helpful when guiding a user to the next action, such as in an onboarding tour. Common use cases include loading, uploading, menu toggling, and playing/pausing a video.

Illustrations

Illustrations are another common use case. They can be included in a product as a blank state, demonstrating what to do in order to generate data on a dashboard. Animated emojis and stickers are other popular use cases. There are also animated spot illustrations which brighten up landing pages, bringing dimensionality and fun while building a brand.

How to prepare SVGs

Now, let’s get into the nitty-gritty. The first thing you’ll want to do is prepare an SVG. It may feel annoying to start cleaning when you’re ready to get messy and turn into a mad scientist animator, but it’ll be easier to start out with simplified SVG code.

Simplify the SVG code

When an SVG is created, it has extra code that is often unnecessary. So, it’s important to optimize it. I like to use SVGO which reduces the file size and saves the paths with unique IDs (this is important for preventing issues with several SVGs on the same page). It’s a Node.js tool and there are several ways to use it, including a Sketch plugin: SVGO Compressor.

Create intentional groupings (if needed)

Open the SVG in a code editor, and take note of the elements. Those are used to group SVG elements. If you want to animate a group of elements together, wrap them in , and name them with a class or ID. Consider converting ID names to class names if you anticipate styling more than one path in the same way (IDs can only be used once). Once you have an ID or class on the shape, you’ll be able to target them with CSS. When you save the SVG there won’t be any visible change for now.

Beware of stacking order (if you’ll be animating a shape that is going behind another shape)

It seems counter-intuitive, but shapes listed last will be pasted over the aforementioned shapes. So, if you want a shape to appear in the background, make sure it’s listed at the top of the SVG code. SVG shapes are “painted” in order from top to bottom.

Set SVG styling to the preferred, initial state

SVGs have presentation attributes which are similar to CSS styles but are set directly on the SVG. A common example is a fill color. Since these styles are set on the SVG, you may assume they hold a lot of weight by the browser. As it turns out, any CSS/Sass you set externally will naturally override the SVG styling without a need for an !important declaration. However, you want to be mindful of what is set on the SVG so you can prepare for what’s shown during page load. For a slow loading page, you may see a flash of the SVG prior to getting styled by the CSS. I recommend you leave in the width and height, as to avoid an unstyled flash of the SVG during page load (Sara Soueidan does a good job of explaining Flash of Unstyled SVGs (FOUSVG) here).

Applying CSS to SVGs

Now that you have the SVG tidy, let’s get into how to bring in the CSS. There are a few considerations when it comes to how to apply CSS to an SVG. A limitation is that you can’t use an external stylesheet to apply styling to an externally linked SVG.

Option 1: Embed the SVG code inline in the HTML (my favorite)

This makes the SVG element and its contents part of the document’s DOM tree, so they’re affected by the document’s CSS. This is my favorite because it keeps the styles separate from the markup.

In the other options below, you’ll see they’re quite entwined. If you’re using Rails, there are gems that can automatically embed SVGs into views. So, in your code you can simply reference the external SVG then it’ll get embedded when compiled. An added benefit of this method is that inlining the SVG means there’s one less HTTP request. Yay, performance!

Option 2: Include the CSS in the SVG within a tag

You can add CSS styles in a tag, nested within the tag.

Option 3: Include the CSS in the SVG with an external link

If you’d like to keep the styling referenced in the SVG, but not actually include it within the SVG, you can use the tag to link to an external style sheet from the SVG.

Option 4: Use inline CSS styles in the SVG


CSS may also be set on an element using inline style attributes.

What can be animated with CSS?

Lots of things, actually! CSS properties with values that can change over time can be animated using CSS Animations or CSS Transitions (for a full list of these properties, consult the MDN Web Doc’s list of Animatable CSS Properties). Here are a few demos to spark inspiration.

Demos

There are two main types of animations we’ll cover, and they differ based on the amount of control they prov >Note: I’ll be using Sass in the demos, but of course it works the same for CSS too. Also, for simplicity I’m leaving out the prefixes although you’ll need those in production (more on that later).

Transition property

For animations triggered on load or by a state change, such as hover or click, you can use the transition property. The transition property allows property values to change smoothly over a specified duration. Without it, the change would happen in an instant, creating a jaring look.

Мастер Йода рекомендует:  Видеокурс по углубленному программированию на CC++

Transition property

transition: property duration timing-function delay;

Value Description
transition The shorthand property for setting all four at once
transition-delay A delay (in seconds) for the transition effect
transition-duration Number of seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function The speed curve of the transition effect

Example of transforms on hover

This psychedelic donut has a color-shifting icing made possible by the transition property! The transition on the #donut-icing element tells the fill to change gradually over three seconds using the ease-out timing-function . The hover state triggers the fill to change to blue. What happens in the middle is a cool color blending which lets a bit of purple pop in.

Animation property

A limitation of the transition property is that it doesn’t give much control over what changes happen during the timeline. It’s better for simpler animations that just go from point A to point B. For further control, use the animation property. The properties can be used individually, but I’ll be demoing the animation shorthand.

Animation property

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Value Description
animation-name This is the name of the keyframe you want to bind to the selector. Keep an eye on this one when you read the keyframes section below.
animation-duration The length of animation in seconds or milliseconds. Note: Always specify the animation-duration property. Otherwise the duration is 0 and will never be played.
animation-timing-function The speed curve of the animation. Eg: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit
animation-delay Defined in seconds (s) or milliseconds (ms), it’s the length of a delay before the animation will start. Note: If given a negative value, it will start playing as if it had been playing for a given amount of time.
animation-iteration-count The number of times an animation should be played. Eg: any numerical number
animation-direction Play the animation in reverse or alternate cycles. Eg: normal, reverse, alternate, alternate-reverse, initial, inherit
animation-fill-mode Specifies what values are applied by the animation outside the time it is executing
animation-play-state Specifies whether the animation is running or paused
initial default value
inherit inherited from the parent element

Keyframes

This is where it really gets exciting and this is what sets animation apart from the transition property, in terms of timing control. Use the @keyframes at-rule to tell it how to change at intermediary steps. To use keyframes, add a @keyframes at-rule with a name that matches the desired animation-name property. Use keyframe selectors to specify the percentage along the animation timeline where the change should take place.

Here’s an example showing percentage selectors:

If you want to create keyframes for just the beginning and end, you can do so like this:

While keyframes are likely to run wherever you put them in your stylesheet, they’re typically placed below the animation property, where they can be easily referenced.

Transforms

Elements can be animated in a 2-dimensional or 3-dimensional space. Here, I’ll show a few examples of 2D transforms. To learn more about 3D transforms, check out The noob’s guide to 3d transforms.

Rotating

Here’s a spinning loading icon that uses a rotate transform. Wondering how it’s made? It starts with this basic SVG that appears as a ring with a darkened quadrant.

In the Sass, the SVG is targeted with the SVG’s ID. Then, the animation and transition are defined. The animation references the name of the @keyframes , where the transform: rotate is set to go from 0 degrees to 360 degrees (a full rotation). That’s all it takes to make this spinner come to life!

Wanting something smoother? SVGs support gradients, so you can achieve a smoother effect using the same Sass but with an SVG that has a gradient applied to the ring (see it defined as #spinner-gradient-a below).

Now, let’s play around with transform: scale to create this morphing bar loading icon.

The SVG consists of three equally sized rectangles spaced apart evenly. IDs have been added per element — for the SVG and all three s so they can be easily targeted with the Sass.

The Sass applies the animation to each bar. The keyframes tell the bars to change scale along the Y axis in four places in the timeline — on onset, a quarter of the way in, halfway, and then three-quarters of the way in. The first number in the animation denotes the animation length, while the second one sets the delay. Since I want these bars to morph in size at different times, I’ve added different delays for each.

An origin story

Note that transform-origin: center tells the transform to scale from the center of the bar; otherwise, it would scale from the top down and appear as if the bars are drilling into the ground. Test it out, and you’ll see what I mean. This is an important lesson to learn: by default, an SVG is positioned at the (0, 0) point, in the top-left corner. This is a key difference if you’re used to working with HTML elements, whose default transform-origin is always at (50%, 50%).

Fancier techniques

Line drawing animation

This nifty effect makes your SVG appear as if it’s being drawn. It requires an SVG with lines since it relies on strokes. I’ll walk you through how it’s done for a single line, and then you’ll know how to do the rest.

First, apply a dashed stroke to the lines using stroke-dasharray . The number represents the length of the dashes in pixels. You’ll want it to be the length of the line.

Then add stroke-dashoffset to reposition the dash along the line. Make it as long as the line itself so it looks like a solid line. This is how the final frame of the animation will look.

Now it’s ready to be animated. Add keyframes which animate the stroke-dashoffset so it goes from the full offset (no stroke visible) to 0px offset (solid stroke). Note the forwards in the animation property. This is an animation-fill-mode which tells the animation to stay in its final end state once played. Without it, the animation would play then return to its first “frame” as its final resting spot.

Animated illustration

For this elated beating heart, a few animations are triggered on hover. There’s a 110% scale change on the heart, the eyes get smaller, the mouth gets bigger, blush appears, and the heart pulses. For the pulse effect, I used Animista’s heartbeat animation. Animista is a great resource for premade CSS animation effects that you can reuse and iterate on.

For this popsicle, I animated the drops by changing their position using transform: translate . To make them disappear, I animated the opacity . Now it looks like it’s a hot summer day!

Plugins

Do it yourself using the aforementioned CSS/Sass, or take a shortcut by using a plugin like Animate.CSS. It contains ready-to-use utility classes for common animations, such as fades, slides, shake, and many more. If you’d like to explore the JavaScript options, I’ve heard great things about Greensock’s GSAP, which has a powerful plugin called MorphSVGPlugin which lets you morph an SVG shape into another shape.

Cross-browser compatibility

Much of CSS Animations is supported very well, even across browsers. But there are still a few things to be aware of. Here are my tips:

Browser prefixes

You can check shouldiprefix.com to confirm if you need to include browser-specific vendor prefixes. At the time of this writing, it’s recommended you use the -webkit-animation and @-webkit-keyframes prefixes.

Browser testing

Keep in mind that even though there is a lot of browser support, there are some rendering differences you may encounter. For example, if you’d like to support older versions of Firefox (v. 42 and below), look out for a bug regarding transform-origin. While it’s fixed now, for a while, Firefox didn’t accept any keywords (eg. center) or percentages in transform-origin. So, if you encounter a rendering issue there, try using pixels instead. You can look to the cx and cy attributes to calculate the centers. To find rendering differences across multiple browsers and devices, test out your animations on BrowserStack to find any oddities. Chrome DevTools has an Animations tab which is helpful for getting a closer look at the animation states. It allows you to see a timeline visualization of the animations on the page, replay the animations in slow motion, and modify the animations.

Conclusion

Now that you know a few different ways to animate SVGs with CSS, I hope you’re inspired to create your own animations for the web! It’s fun to bring static SVGs to life with just a few lines of CSS. Once you get the hang of a few tricks, it’ll be easier to tackle the more complicated animations. There are endless amounts of inspiration online and on sites like CodePen. Happy animating!

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Добавить комментарий