Как мне эффективно создать хронологическую анимацию-график времени в CSS или Javascript?

Question

В настоящее время я работаю над новым проектом и только начал углубляться в CSS-анимацию.Мой вопрос: как мне создать график анимации квестов?То есть, как мне запустить одну анимацию после окончания другой, ЭФФЕКТИВНО ..?

Пример того, чего я пытаюсь достичь: https://www.v2.aristidebenoist.com/

Answer 1

Greensock.js - это путь, по моему мнению. Вы можете написать все с мелкими деталями, и в нем есть множество полезных плагинов и встроенных инструментов для обычных задач анимации:

https://greensock.com/timelinelite

Answer 2

Просмотр ключевых кадров CSS: https://css -tricks.com / snippets / css / keyframe-animation-syntax / и https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

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