Az Animáció-vizsgáló teljes körű irányítást biztosít bármely weboldalon futó minden CSS animáció és átmenet felett. Szüneteltesse az összes animációt egyszerre, lassítsa le őket a képkockánkénti vizsgálathoz, gyorsítsa fel a teljesítmény teszteléséhez, vagy görgesse manuálisan az idővonalat — mindezt egyetlen lebegő panelről, a böngésző Fejlesztői eszközeinek érintése nélkül.
A CSS animációk hibakeresése köztudottan nehéz feladat. Gyorsan történnek, átfedik egymást, a böngésző Fejlesztői eszközeiben pedig a számított stílusok között kell vadászni az animációs tulajdonságokra. Az Animáció-vizsgáló megoldja ezt: automatikusan felismer minden @keyframes animációt és CSS átmenetet az oldalon, kilistázza őket a teljes konfigurációjukkal (időtartam, gyorsítás, késleltetés, ismétlésszám), és olyan lejátszási vezérlőket ad, amelyek globálisan vagy animációnként is működnek. Akár egy szaggatott lebegő (hover) effektust javít, akár egy oldalmegnyitási szekvencia időzítését finomítja, vagy egy összetett animációs könyvtár belső működését próbálja megérteni, ez az eszköz kezébe adja az irányítást.
Azonnal fagyasszon le minden animációt az oldalon egyetlen kattintással. Minden animáció az aktuális pozíciójában áll meg — nem ugrik vissza az elejére. Kattintson a lejátszásra, hogy pontosan onnan folytatódjanak, ahol megálltak. Nélkülözhetetlen az animáció közbeni állapotok vizsgálatához, amelyeket szabad szemmel lehetetlen elkapni.
Állítsa be az összes animáció lejátszási sebességét szimultán. Választhat 0.25x (negyed sebesség), 0.5x, 1x (normál), 2x vagy 4x sebességek közül. A 0.25x-ös sebesség mellett még a leggyorsabb, 200 ms-os átmenetek is könnyen megfigyelhetők és elemezhetők.
Az oldalon található összes CSS animáció és átmenet automatikusan felismerésre kerül, és egy görgethető listában jelenik meg. Minden bejegyzés mutatja az animáció nevét (vagy az átmenet tulajdonságát), az időtartamot, az időzítési függvényt (ease, linear, cubic-bezier), a késleltetést, az ismétlésszámot és az aktuális futási állapotot.
Húzza az idővonal csúszkáját az animáció manuális, képkockánkénti léptetéséhez. Lássa pontosan, mi történik 25%-nál, 50%-nál vagy az animációs ciklus bármely pontján. Az oldal valós időben frissül a csúszka mozgatása közben.
Szüneteltesse, indítsa el vagy állítsa be a sebességet az egyes animációknál külön-külön. Izoláljon egyetlen animációt a hibakereséshez anélkül, hogy az oldal többi mozgó eleme elvonná a figyelmét.
Kattintson a lista bármelyik animációjára a teljes CSS deklaráció megtekintéséhez — @keyframes definíció, animációs rövidített írásmód (shorthand) lebontása, számított kezdő- és végállapotok, valamint az érintett elemek listája.
Animáció-vizsgáló 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-origintranslaterotatescaleskewLassítsa le az animációt 0.25x-ös sebességre, hogy azonosítsa, pontosan hol történik akadás vagy hiba. Ellenőrizze, hogy a problémát elrendezési kényszer (pl. szélesség/magasság animálása transzformáció helyett), helytelen gyorsítás vagy az ugyanazon az elemen lévő ütköző animációk okozzák-e.
Használja az idővonal görgetését, hogy lássa, hogyan néz ki a cubic-bezier görbéje a gyakorlatban. Hasonlítsa össze az ease-in és ease-out viselkedést specifikus százalékoknál. Módosítsa az értékeket és játssza újra, amíg a mozgás természetesnek nem tűnik.
Látogasson el lenyűgöző animációkkal rendelkező weboldalakra (landing oldalak, portfóliók), és vizsgálja meg pontosan, hogyan épülnek fel. Nézze meg a @keyframes definíciókat, időzítési értékeket és a célzott elemeket, amelyek az összetett szekvenciákat működtetik.
Ellenőrizze, hogy a lebegő effektusok, töltőikonok, vázképernyők és oldalátmenetek megfelelően működnek-e. Állítsa meg őket köztes állapotban a vizuális hibák, például elemátfedések, hibás z-index vagy tartalom-elcsúszás ellenőrzéséhez.
Azonosítsa azokat az animációkat, amelyek problémát okozhatnak a vesztibuláris zavarokkal küzdő felhasználók számára. Ellenőrizze, hogy a 'prefers-reduced-motion' beállítás tiszteletben van-e tartva az összes animáció szüneteltetésével és az oldal funkcionalitásának ellenőrzésével.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson az Animáció-vizsgáló ikonra. Az eszköz azonnal átvizsgálja az oldalt, és észleli az összes futó CSS animációt és átmenetet.
Megjelenik egy lebegő panel, amely felsorolja az oldalon talált összes animációt. Minden bejegyzés mutatja a nevet, időtartamot, gyorsítási függvényt, és hogy jelenleg fut-e vagy szünetel. Egy számláló jelvény mutatja az észlelt animációk összszámát.
Kattintson a globális Szünet (Pause) gombra az összes animáció egyidejű lefagyasztásához. Az elemek az animáció közbeni állapotukban maradnak, így megvizsgálhatja a CSS tulajdonságokat, képernyőképet készíthet vagy összehasonlíthatja a pozíciókat.
Használja a sebességválasztót az animációk 0.25x-ös lassításához a részletes megfigyeléshez, vagy gyorsítsa fel őket 4x-esre a hosszú folyamatok gyors átfuttatásához. A sebességmódosítások azonnal, újraindítás nélkül érvényesülnek.
Húzza az idővonal csúszkáját balra és jobbra az animáció manuális léptetéséhez. Az oldal valós időben frissül, pontosan megmutatva, hogyan néz ki az egyes képkockákban. Tökéletes a vizuális hibák kiszűrésére vagy a gyorsítási görbék ellenőrzésére.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.