Ответ 1

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

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

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

Ответ 2

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

• По состоянию на март 2013 года такой функции не было в Firefox DevTools, хотя Разработчики Mozilla признали, что получили запросы для этого.
• По состоянию на ноябрь 2013 г. Chrome DevTools не имеет инструментов для отладки рендеринга анимации CSS.
• Chrome DevTools имеет поддержку для перехода через анимацию холста HTML5.
• Невозможно выполнить переход анимации с помощью Javascript, так как "внутренности перехода [не доступны] для Javascript".
• И последнее, но не менее важное: в DevTools API нет ничего очевидного, указывающего на поддержку отладки анимации CSS.

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

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

Ответ 3

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

https://vimeo.com/116038639