Inspektor animací vám dává úplnou kontrolu nad každou CSS animací a přechodem na jakékoli webové stránce. Pozastavte všechny animace najednou, zpomalte je pro inspekci snímek po snímku, zrychlete je pro testování výkonu nebo ručně procházejte časovou osu — vše z jednoho plovoucího panelu bez nutnosti otevírat DevTools prohlížeče.
Ladění CSS animací je notoricky obtížné. Probíhají rychle, překrývají se a DevTools prohlížeče vás nutí prohledávat vypočítané styly, abyste našli vlastnosti animací. Inspektor animací to řeší automatickým zjišťováním každé animace @keyframes a CSS přechodu na stránce, jejich výpisem s úplnou konfigurací (trvání, přechod, zpoždění, počet iterací) a poskytováním ovládacích prvků přehrávání fungujících globálně nebo pro každou animaci zvlášť. Ať už ladíte třesoucí se efekt při najetí myší, dolaďujete časování vstupní sekvence stránky nebo se snažíte pochopit, jak funguje komplexní knihovna animací, tento nástroj vám dává kontrolu.
Okamžitě zmrazte každou animaci na stránce jedním kliknutím. Všechny animace se pozastaví na aktuální pozici — neresetují se na začátek. Klikněte na přehrát a pokračujte přesně tam, kde skončily. Nezbytné pro inspekci stavů uprostřed animace, které je nemožné zachytit pouhým okem.
Upravte rychlost přehrávání všech animací současně. Vyberte si z 0,25x (čtvrtinová rychlost), 0,5x, 1x (normální), 2x nebo 4x. Spuštění při 0,25x usnadňuje sledování a ladění i nejrychlejších 200ms přechodů.
Každá CSS animace a přechod na stránce je automaticky zjištěna a zobrazena v posuvném seznamu. Každá položka zobrazuje název animace (nebo vlastnost přechodu), trvání, funkci časování (ease, linear, cubic-bezier), zpoždění, počet iterací a aktuální stav spuštění.
Přetáhněte posuvník časové osy a ručně procházejte animaci snímek po snímku. Přesně zjistěte, co se stane při 25 %, 50 % nebo v jakémkoli bodě animačního cyklu. Stránka se aktualizuje v reálném čase při přetahování.
Pozastavte, přehrajte nebo upravte rychlost jednotlivých animací nezávisle. Izolujte jednu animaci a laďte ji bez rušení ostatními pohybujícími se prvky na stránce.
Kliknutím na libovolnou animaci v seznamu zobrazíte její úplnou deklaraci CSS — definici @keyframes, rozpis zkráceného zápisu animace, vypočítané počáteční a koncové stavy a prvky, na které je aplikována.
Inspektor animací 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-origintranslaterotatescaleskewZpomalte animaci na 0,25x, abyste přesně identifikovali, kde dochází k zadrhávání nebo trhnutí. Zkontrolujte, zda je problém způsoben layout thrashingem (animování width/height místo transform), nesprávným přechodem nebo konfliktními animacemi na stejném prvku.
Pomocí posouvání časové osy zjistěte, jak vaše křivka přechodu cubic-bezier ve skutečnosti vypadá v praxi. Porovnejte chování ease-in a ease-out při konkrétních procentech. Upravujte hodnoty a přehrávejte, dokud pohyb nebude vypadat správně.
Navštivte webovou stránku s působivými animacemi (vstupní stránky, portfolio stránky) a prozkoumejte přesně, jak jsou vytvořeny. Prohlédněte si definice @keyframes, hodnoty časování a cílení prvků, které umožňují fungování komplexních sekvencí.
Ověřte, že efekty při najetí myší, načítací animace, kosterní obrazovky a přechody stránek fungují správně. Pozastavte v mezistavu a zkontrolujte vizuální chyby, jako jsou překrývající se prvky, nesprávný z-index během animace nebo přetékání obsahu.
Identifikujte animace, které by mohly způsobovat problémy uživatelům s vestibulárními poruchami. Zkontrolujte, zda je prefers-reduced-motion správně respektováno pozastavením všech animací a ověřením, zda stránka zůstává plně funkční.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Inspektoru animací. Nástroj okamžitě prohledá stránku a zjistí všechny spuštěné CSS animace a přechody.
Zobrazí se plovoucí panel se všemi animacemi nalezenými na stránce. Každá položka zobrazuje název animace, trvání, funkci přechodu a zda aktuálně běží nebo je pozastavena. Odznak s počtem zobrazuje celkový počet zjištěných animací.
Klikněte na globální tlačítko Pozastavit, abyste zmrazili všechny animace současně. Prvky zůstanou ve svém aktuálním stavu uprostřed animace, což vám umožní zkoumat vlastnosti CSS, pořizovat snímky obrazovky nebo porovnávat pozice.
Pomocí voliče rychlosti zpomalte animace na 0,25x pro detailní sledování nebo je zrychlete na 4x pro rychlé procházení dlouhých animací. Změny rychlosti se aplikují okamžitě bez restartu.
Přetáhněte posuvník časové osy doleva a doprava a ručně procházejte animaci. Stránka se aktualizuje v reálném čase a zobrazuje přesně, jak každý snímek vypadá. Ideální pro odhalení chyb nebo ověření křivek přechodu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.