Инспекторът на анимации ви дава пълен контрол над всяка CSS анимация и преход, работещи на която и да е уебстраница. Паузирайте всички анимации едновременно, забавете ги до преглед кадър по кадър, ускорете ги за тестване на производителността или превъртете времевата линия ръчно — всичко това от един плаващ панел, без да докосвате DevTools на браузъра.
CSS анимациите могат да бъдат изключително трудни за отстраняване на грешки. Те се случват бързо, припокриват се, а браузърните DevTools ви карат да търсите из вычислените стилове (computed styles), за да намерите свойствата на анимацията. Инспекторът на анимации решава това, като автоматично открива всяка @keyframes анимация и CSS преход на страницата, изброява ги с пълната им конфигурация (времетраене, функция за ускорение (easing), забавяне, брой повторения) и ви предоставя контроли за възпроизвеждане, които работят глобално или за всяка анимация поотделно. Независимо дали отстранявате грешки в трептящ ефект при посочване (hover), настройвате фино времето на последователност от влизане в страницата или се опитвате да разберете как работи под капака сложна библиотека за анимации, този инструмент ви дава контрол.
Мигновено замразете всяка анимация на страницата с едно щракване. Всички анимации спират на текущата си позиция — не се нулират до началото. Щракнете върху възпроизвеждане (play), за да продължите точно оттам, където са спрели. От съществено значение за проверка на състояния по средата на анимацията, които е невъзможно да се уловят с просто око.
Регулирайте скоростта на възпроизвеждане на всички анимации едновременно. Изберете между 0.25x (четвърт скорост), 0.5x, 1x (нормална), 2x или 4x. Работата с 0.25x прави дори най-бързите преходи от 200ms лесни за наблюдение и отстраняване на грешки.
Всяка CSS анимация и преход на страницата се откриват автоматично и се показват в превъртащ се списък. Всеки запис показва името на анимацията (или свойството за преход), продължителността, функцията за време (ease, linear, cubic-bezier), закъснението, броя на итерациите и текущото състояние на изпълнение.
Плъзнете плъзгача на времевата линия, за да се придвижите ръчно през анимацията кадър по кадър. Вижте точно какво се случва на 25%, 50% или в която и да е точка от цикъла на анимацията. Страницата се актуализира в реално време, докато влачите.
Поставете на пауза, възпроизведете или регулирайте скоростта за отделни анимации независимо. Изолирайте една анимация, за да отстраните грешки в нея, без да се разсейвате от други движещи се елементи на страницата.
Щракнете върху която и да е анимация в списъка, за да видите пълната й CSS декларация — дефиницията на @keyframes, разбивка на съкратеното свойство на анимация (animation shorthand), изчислените начални и крайни състояния и към кои елементи е приложена.
Инспектор на анимации 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, за да идентифицирате точно къде се появява заекване (stutter) или прекъсване (jank). Проверете дали проблемът е причинен от разбиване на оформлението (layout thrashing - анимиране на width/height вместо transform), неправилно ускорение или конфликтни анимации на един и същ елемент.
Използвайте превъртането на времевата линия, за да видите как всъщност изглежда на практика вашата крива на ускорение cubic-bezier. Сравнете поведението на ease-in спрямо ease-out при специфични проценти. Регулирайте стойностите и възпроизведете отново, докато движението не се усети правилно.
Посетете уебсайт с впечатляващи анимации (целеви страници, портфолио сайтове) и проверете точно как са изградени. Вижте дефинициите на @keyframes, стойностите на времето и таргетирането на елементи, което кара сложните последователности да работят.
Уверете се, че hover ефектите, зареждащите спинери, скелетните екрани (skeleton screens) и преходите на страници се държат правилно. Поставете на пауза в средни състояния, за да проверите за визуални проблеми, като припокриване на елементи, неправилен z-index по време на анимация или преоформяне на съдържанието (content reflow).
Идентифицирайте анимации, които биха могли да причинят проблеми на потребители с вестибуларни нарушения. Проверете дали prefers-reduced-motion се спазва правилно, като поставите на пауза всички анимации и видите дали страницата остава напълно функционална.
Отворете плаващия док DevSuite Pro и щракнете върху иконата на Инспектора на анимации. Инструментът веднага сканира страницата и открива всички работещи CSS анимации и преходи.
Появява се плаващ панел, изброяващ всяка намерена анимация на страницата. Всеки запис показва името на анимацията, продължителността, функцията за смекчаване (easing function) и дали в момента работи или е на пауза. Значката за броене показва общия брой на откритите анимации.
Щракнете върху глобалния бутон за пауза, за да замразите всички анимации едновременно. Елементите остават в текущото си състояние по средата на анимацията, което ви позволява да инспектирате CSS свойствата, да правите екранни снимки или да сравнявате позиции.
Използвайте селектора на скоростта, за да забавите анимациите до 0.25x за подробно наблюдение или ги ускорете до 4x, за да преминете бързо през дълги анимации. Промените в скоростта се прилагат незабавно без рестартиране.
Плъзнете плъзгача на времевата линия наляво и надясно, за да преминете ръчно през анимацията. Страницата се актуализира в реално време, като ви показва точно как изглежда всеки кадър. Идеално за забелязване на проблеми (glitches) или проверка на кривите на ускорение (easing curves).
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.