Animation Inspector даёт вам полный контроль над каждой CSS-анимацией и transition, запущенными на любой веб-странице. Приостановите все анимации одним кликом, замедлите до покадрового просмотра, ускорьте для тестирования производительности или вручную прокрутите временную шкалу — всё из единой плавающей панели, без открытия DevTools браузера.
CSS-анимации могут быть крайне сложны в отладке: они происходят быстро, накладываются друг на друга, а DevTools браузера вынуждает искать свойства анимации в вычисленных стилях. Animation Inspector решает эту проблему, автоматически обнаруживая все @keyframes-анимации и CSS-transition на странице, отображая их с полной конфигурацией (длительность, easing, задержка, количество повторений) и предоставляя элементы управления воспроизведением — как глобально, так и для каждой анимации отдельно. Независимо от того, отлаживаете ли вы дёргающийся hover-эффект, настраиваете тайминг последовательности появления элементов или разбираетесь в работе сложной библиотеки анимаций — этот инструмент передаёт управление в ваши руки.
Мгновенно заморозьте все анимации на странице одним кликом. Все анимации останавливаются в текущем положении — без сброса к началу. Нажмите «Воспроизведение», чтобы продолжить с того места, где они остановились. Незаменимо для осмотра промежуточных состояний анимации, которые невозможно уловить невооружённым глазом.
Регулируйте скорость воспроизведения всех анимаций одновременно. Выбирайте из 0.25x (четверть скорости), 0.5x, 1x (обычная), 2x или 4x. При скорости 0.25x даже самые быстрые transition длительностью 200ms становятся легко наблюдаемыми и отлаживаемыми.
Все CSS-анимации и transition на странице автоматически определяются и отображаются в прокручиваемом списке. Каждая запись показывает название анимации (или свойство transition), длительность, функцию тайминга (ease, linear, cubic-bezier), задержку, количество повторений и текущее состояние воспроизведения.
Перетащите ползунок временной шкалы, чтобы вручную перемещаться по анимации кадр за кадром. Смотрите, что происходит на 25%, 50% или в любой момент цикла анимации. Страница обновляется в реальном времени по мере перетаскивания.
Приостанавливайте, воспроизводите или регулируйте скорость для каждой анимации независимо. Изолируйте отдельную анимацию для отладки, не отвлекаясь на другие движущиеся элементы страницы.
Нажмите на любую анимацию в списке, чтобы увидеть её полное CSS-объявление: определение @keyframes, разбор сокращённого свойства animation, вычисленные начальное и конечное состояния, а также элементы, к которым она применена.
Инспектор анимаций covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewЗамедлите анимацию до 0.25x, чтобы точно определить, в каком месте возникает заикание или прерывистость. Проверьте, вызвана ли проблема layout thrashing (анимация width/height вместо transform), некорректным easing или конфликтующими анимациями на одном элементе.
Используйте прокрутку временной шкалы, чтобы увидеть, как кривая cubic-bezier easing выглядит на практике. Сравнивайте поведение ease-in и ease-out в конкретных процентных точках. Корректируйте значения и повторяйте воспроизведение, пока движение не станет правильным.
Зайдите на сайт с впечатляющими анимациями (лендинги, портфолио) и изучите, как именно они созданы. Просматривайте определения @keyframes, значения тайминга и целевые элементы, благодаря которым работают сложные последовательности.
Проверяйте, что hover-эффекты, индикаторы загрузки, skeleton-экраны и переходы между страницами работают корректно. Ставьте паузу в промежуточных состояниях для проверки визуальных глюков: перекрытия элементов, неверного z-index во время анимации или переформатирования содержимого.
Определяйте анимации, которые могут вызывать проблемы у пользователей с вестибулярными расстройствами. Проверяйте, корректно ли соблюдается prefers-reduced-motion, приостанавливая все анимации и убеждаясь, что страница остаётся полностью функциональной.
Откройте плавающую панель DevSuite Pro и нажмите иконку Animation Inspector. Инструмент немедленно сканирует страницу и определяет все запущенные CSS-анимации и transition.
Появляется плавающая панель со списком всех найденных на странице анимаций. Каждая запись показывает название анимации, длительность, функцию easing и текущее состояние — запущена или на паузе. Значок-счётчик отображает общее количество обнаруженных анимаций.
Нажмите глобальную кнопку «Пауза», чтобы заморозить все анимации одновременно. Элементы остаются в текущем промежуточном состоянии, позволяя вам осматривать CSS-свойства, делать скриншоты или сравнивать позиции.
Используйте селектор скорости, чтобы замедлить анимации до 0.25x для детального наблюдения или ускорить до 4x, чтобы быстро просмотреть длинные анимации. Изменение скорости применяется мгновенно без перезапуска.
Перетащите ползунок временной шкалы влево и вправо, чтобы вручную перемещаться по анимации. Страница обновляется в реальном времени, показывая, как выглядит каждый кадр. Идеально для обнаружения глюков или проверки кривых easing.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.