Мне часто задают вопрос: какой инструмент для анимации Вы рекомендуете?

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

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

#Native Анимация

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

 #CSS

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

Плюсы:

• Не нужна никакая внешняя библиотека.
• Большая производительность, особенно если вы делаете вещи, которые по сути аппаратно ускоряются (то есть разгружают GPU). Вот статья о свойствах, которые может вам помочь вникнуть.
• Препроцессоры (как Sass или Less) позволяют создавать последовательности переменных (для упрощения функций или синхронизаций),  наряду с :nth-child псевдо - классами. И этого достаточно, чтобы получить ошеломляющие эффекты.
• Вы можете использовать onAnimationEnd и некоторые другие анимационные рычаги с обычным JavaScript .
• CSS постоянно развивается. Например, модуль CSS Motion Path уже сейчас позволяет создавать мультипликационное движение только средствами CSS.
• Это простой в использовании метод для гибкой разработки, потому что вы можете быстро изменить анимацию в соответствии с запросами.

Минусы:

• Функция Безье может быть немного ограничена. Вы не можете произвести некоторые сложные физические эффекты, которые хороши для реалистичного движения (но они и не нужны слишком часто).
• Если вы выходите за пределы цепочки из трех анимаций в строке, то лучше все-таки перейти на JavaScript.  Секвенирование в CSS становится сложной, и вам в конечном итоге придется делать много перерасчетов при корректировках. Посмотрите вот эту работу от Val Head, здесь хорошо показано, что я имею в виду. Эффект поворота тоже легче написать в JavaScript.  Длинные, сложные последовательные анимации проще писать и читать в JavaScript.
• Поддержка анимации в браузерах еще совсем слабая. Вы можете проголосовать за поддержку в Firefox здесь. Голосование за поддержку в Safari, насколько я могу понимать, более индивидуальное. Я зарегистрировалась, чтобы заполнить отчет об ошибке и просил модуль траектории движения в CSS в качестве признака.
• CSS + Анимация SVG имеет некоторые недочеты в реализации J . Одним из примеров является то, что в браузере Safari , элементы, отображаются непрозрачными и не. Другой пример – когда не-интуитивным способом  происходит преобразование элемента.  Надеюсь, в SVG 2 этого не будет, но на данный момент, CSS и SVG на мобильном телефоне иногда возникают странные хаки.