Отладчик анимаций и переходов

Chrome DevTools → Дополнительные инструменты → Анимации (или Cmd+Shift+P → «Анимации»). Панель записывает выполняющиеся переходы и анимации CSS и отображает их на временной шкале с возможностью перемещения указателя и управления скоростью воспроизведения.

Панель анимаций предлагает скорость воспроизведения 10%, 25% и 100%. Замедление до 10% выявляет проблемы с синхронизацией, кривыми плавности и рывками, незаметными на полной скорости, что особенно важно при отладке сложной хореографии множества элементов.

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

Перетащите указатель воспроизведения в панели анимаций в любую точку временной шкалы анимации. Страница отобразит именно этот кадр — можно остановить любую анимацию в любой момент и одновременно проверить положение элементов, непрозрачность и значения преобразований в панели «Вычисленные стили».

Нажмите на строку анимации, чтобы развернуть её. Отдельные ключевые кадры появятся на временной шкале в виде ромбиков. Нажмите на ромбик ключевого кадра, чтобы перейти к соответствующему правилу @keyframes в панели «Стили» и отредактировать его с предварительным просмотром в реальном времени.

Chrome DevTools показывает кривые кубического Безье для каждого сегмента анимации. Нажмите на значок кривой рядом с функцией времени в панели «Стили», чтобы открыть редактор кубической кривой Безье, перетащить управляющие точки и увидеть изменения анимации в реальном времени.

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

При включённых границах слоёв в разделе «Отрисовка» (DevTools → «Отрисовка») анимированные элементы на собственном слое GPU отображаются с зелёными границами. Анимации без отдельного композитного слоя (анимация ширины, положения сверху или цвета) не имеют границы слоя и могут вызывать вспышки перерисовки — это видно при включённой функции «Вспышки перерисовки».

Запишите профиль производительности во время анимации. На пламенной диаграмме ищите длительные события отрисовки или компоновки, совпадающие с кадрами анимации. Анимации, выполняемые только композитором (преобразования и непрозрачность), отображаются только как события композитного слоя — они быстрые и не требуют перерисовки.

Анимации JavaScript, использующие rAF, отображаются в панели производительности в разделе «Кадры». Длительные обратные вызовы rAF, выполняющиеся более 16 мс, приводят к пропуску кадров. Профилируйте обратный вызов, чтобы найти ресурсоёмкие вычисления, и по возможности перенесите их в отдельный поток с помощью веб-воркеров.

Программный интерфейс веб-анимаций (element.animate()) и библиотеки на основе WAAPI отображаются в панели анимаций вместе с анимациями CSS. Панель не различает источник — CSS или WAAPI, — но перемещение указателя и замедленное воспроизведение работают для обоих типов.

Что позволяет делать перемещение указателя воспроизведения в панели анимаций?

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