Отладка CSS-анимации с помощью Chrome Devtools

Question

Можно ли просмотреть или отладить шаги, выполняемые одним элементом в анимации перехода-css? Я работаю с Chrome Dev Tools, но я довольно новичок в этом. Я искал ее и видел что-то со шкалы времени, но я не нахожу шаг за шагом.

Моя анимация начинается с 0% и идет на 100%, но, похоже, что-то странное около 50%, хотя 50% -ный шаг не объявлен. Вот почему я хотел бы посмотреть, что происходит.

Answer 1

После небольшого исследования, похоже, что в настоящее время это невозможно с помощью Chrome DevTools. Вот некоторые случайные лакомые кусочки информации, которые я нашел:

• По состоянию на март 2013 года, не такая особенность не существовавшие в Devtools Фирефокса, хотя Mozilla developers have acknowledged having received requests for this.
• С ноября 2013 года в Chrome DevTools нет инструментов to debug the rendering of CSS animations.
• Хром DevTools does have support для перехода через HTML5 холст анимация.
• Невозможно перейти через переход анимации using Javascript, поскольку «внутренности перехода [не доступны] для Javascript».
• Последнее, но не менее важное: в DevTools API нет ничего очевидного, что указывает на то, что существует поддержка отладки анимации CSS.

Для чего это стоит, вот несколько советов, хотя я не проверял это, и я довольно невежествен об этой теме:

• Если возможно, pause the animation путем изменения элемента 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 есть лучшая поддержка отладки), если критически важно выполнять такие действия, как прохождение анимации.

Answer 2

Download Chrome Canary, чтобы иметь доступ к новой функции управления анимацией. Смотрите это видео, чтобы увидеть, как это работает:

https://vimeo.com/116038639

Answer 3

Да, это возможно.

Можно отлаживать переходы и анимацию CSS с помощью Chrome DevTools.Просто нажмите на эту кнопку:

Затем вкладка «Анимация» откроется в панели консоли (вы можете открыть его, нажав Esc, если у вас есть DevTools сосредоточенного - просто нажмите на Devtools сфокусировать его):