Как анимировать SVG?

Question

[AtaBilay]

Сделал я свою svg в Figma, сделал кадры, чтобы была анимация, теперь сижy и дyмаю, как ее интегрировать в сайт. Можно ли сделать так, чтобы при наведение , он бы отсылался бы к дрyгой svg, и так бы полyчилась анимация, или где то отдельно на редакторах надо делать, а потом yже вносить в сайт и через JS давать скрипты? Помогите пожалyйста, желательно, чтобы способ затрагивал бы только HTML и CSS

Comments

[Вадим]

как ее интегрировать в сайт

https://htmlacademy.ru/blog/html/short-4

Можно ли сделать так, чтобы при наведение , он бы отсылался бы к дрyгой svg, и так бы полyчилась анимация

Выбросьте это покадровое мышление из зари мультипликации, что Вам нужно отрисовать промежуточные кадры.. Свг свойства и фигуры анимируются путём указания какое свойство какое должно иметь значение через определённое время анимации (как правило в процентах).
Например, говорите что начальное значение цвета - красный. Конечное синий. Анимация длится 2 секунды. И вот 2 секунды цвет будет плавно переходить из красного в синий.

или где то отдельно на редакторах надо делать

Можно сделать в, например, svgator, если Вы больше дизайнер чем разработчик. Там есть иморт конечного результата как на js, так и на css.

Ну и вбейте Ваш вопрос в гугл. 100500 ответов на любой вкус. (Вы должны были это сделать перед тем как задать вопрос, согласно правилам сервиса)

[Tony]

Вообще говоря советую обратить внимание на Lottie, но для этого нужен After Effects

Ну и само собой, сам принцип векторной анимации никак не связан с покадровой.

Answer 1

[vrpk34]

Я в ролике видел очень понятный по этой теме SVG КАК ПРОСТО 2