Почему стоит использовать SVG-картинки и как их анимировать. Часть 4. SVG может быть анимирован несколькими способами:
SMIL - спецификация анимаций SVG
WebGL
CSS animation
Давайте рассмотрим последний вариант.
Анимация CSS используется для того, чтобы избежать перегрузки вашего сайта большими библиотеками для анимации иконок.
Чтобы увидеть пример CSS анимации,
посмотрите на анимированную яичницу. Как вы можете видеть, здесь используется синтаксис ключевых кадров для анимации (keyframes). Это реализуется путем установки начальной позиции элемента (0%), средней (50%) и конечной позиции (100%). Для достижения плавной анимации начальные и конечные значения равны.
В следующей части поговорим о достоинствах и недостатках CSS анимации.
Предыдущие части читайте по тегу
#webdev_svg
#webdev_статьи