Можно ли просматривать или отлаживать шаги, выполняемые одним элементом в анимации перехода-css? Я работаю с Chrome Dev Tools, но я довольно новичок в этом. Я искал ее и видел что-то со шкалы времени, но я не нахожу шаг за шагом.
Моя анимация начинается с 0% и идет до 100%, но, похоже, что-то странно около 50%, хотя 50% -ный шаг не объявлен. Вот почему я хотел бы посмотреть, что происходит.
Можно отлаживать переходы и анимацию CSS с помощью Chrome DevTools. Просто нажмите эту кнопку:
Затем на панели консоли откроется вкладка "Анимации" (вы можете открыть ее, нажав Esc, если вы сфокусировали DevTools - просто нажмите на DevTools, чтобы сфокусировать ее):
Проведя немного исследований, похоже, что в настоящее время это невозможно с помощью Chrome DevTools. Вот несколько случайных сведений о найденной информации:
Для чего это стоит, вот несколько советов, хотя я их не тестировал, и я довольно не осведомлен о теме:
Если возможно, приостановите анимацию, изменив свойство animation-play-state:
.paused {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Перетащите анимацию в течение более длительного промежутка времени, чтобы поведение перехода было более понятным.
Также существует возможность использования анимаций <canvas> (у которых, по-видимому, у Chrome DevTools есть более лучшая поддержка отладки), если это критически важно для выполнения таких действий, как переход через анимацию.
Загрузите Chrome Canary, чтобы получить доступ к новой функции управления анимацией. Посмотрите это видео, чтобы просмотреть, как он работает: