Animatsiooni Inspektor annab sulle täieliku kontrolli iga CSS animatsiooni ja ülemineku üle, mis töötab veebilehel. Peata kõik animatsioonid korraga, aeglusta neid kaadrihaaval inspekteerimiseks, kiirenda neid jõudluse testimiseks või liigu ajateljel käsitsi — kõik ühest hõljuvast paneelist ilma brauseri DevToolsi puudutamata.
CSS animatsioone on tuntud kui keerulisi siluda. Need toimuvad kiiresti, kattuvad ja brauseri DevTools sunnivad sind otsima animatsiooni omadusi arvutatud stiilide hulgast. Animatsiooni Inspektor lahendab selle, tuvastades automaatselt iga @keyframes animatsiooni ja CSS ülemineku lehel, loetledes need koos täieliku konfiguratsiooniga (kestus, easing, viivitus, korduste arv) ja andes sulle taasesitusjuhtimise, mis töötab globaalselt või animatsiooni kaupa. Kas siled jutterdavat hover efekti, häälestad lehe sisenemise sekventsi ajastust või proovid mõista, kuidas keeruline animatsioonide teek toimib — see tööriist annab sulle kontrolli.
Külmuta koheselt iga animatsioon lehel ühe klõpsuga. Kõik animatsioonid peatuvad oma praeguses positsioonis — mitte ei lähe algusesse tagasi. Klõpsa esitamiseks, et jätkata täpselt sealt, kus need peatusid. Hädavajalik animatsiooni keskolekute inspekteerimiseks, mida palja silmaga on võimatu tabada.
Reguleeri kõikide animatsioonide taasesituse kiirust üheaegselt. Vali 0.25x (veerand kiirus), 0.5x, 1x (tavaline), 2x või 4x. 0.25x kiirus muudab isegi kõige kiiremad 200ms üleminekud kergesti vaadeldavaks ja silutavaks.
Iga CSS animatsioon ja üleminek lehel tuvastatakse automaatselt ja kuvatakse keritavas loendis. Iga kirje näitab animatsiooni nime (või ülemineku omadust), kestust, ajafunktsiooni (ease, linear, cubic-bezier), viivitust, korduste arvu ja praegust olekut.
Lohista ajatelje liugurit, et liikuda animatsiooni läbi käsitsi kaadrihaaval. Vaata täpselt, mis juhtub 25%, 50% või mis tahes punktis animatsioonitsüklis. Leht uueneb reaalajas, kui sa lohistad.
Peata, esita või reguleeri kiirust üksikutele animatsioonidele iseseisvalt. Isoleeri üks animatsioon, et seda siluda ilma teiste liikuvate elementide häirimiseta lehel.
Klõpsa loendis mis tahes animatsioonil, et näha selle täielikku CSS deklaratsiooni — @keyframes definitsioon, animatsiooni lühivormi jaotus, arvutatud algus- ja lõppolekud ning millistele elementidele see on rakendatud.
Animatsiooni Inspektor 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-origintranslaterotatescaleskewAeglusta animatsiooni 0.25x peale, et tuvastada täpselt, kus tekib tõrge või jutter. Kontrolli, kas probleemi põhjuseks on layout thrashing (width/height animeerimine transform asemel), vale easing või konfliktid samale elemendile rakendatud animatsioonide vahel.
Kasuta ajatelje liigutamist, et näha, kuidas sinu cubic-bezier easing kõver tegelikkuses välja näeb. Võrdle ease-in vs ease-out käitumist konkreetsetel protsentidel. Reguleeri väärtusi ja taasesita, kuni liikumine tundub õige.
Külasta veebilehte muljetavaldavate animatsioonidega (landing leheküljed, portfooliosaidid) ja inspekteeri täpselt, kuidas need on ehitatud. Vaata @keyframes definitsioone, ajastuse väärtusi ja elementide sihtimist, mis paneb keerulised sekventsid tööle.
Veendu, et hover efektid, laadimisspinnerid, skelettekraanid ja lehe üleminekud käituvad õigesti. Peata keskolekutes, et kontrollida visuaalsete tõrgete olemasolu nagu elementide kattumine, vale z-index animatsiooni ajal või sisu reflow.
Tuvasta animatsioonid, mis võivad põhjustada probleeme vestibulaarsete häiretega kasutajatele. Kontrolli, kas prefers-reduced-motion on korralikult järgitud, peatades kõik animatsioonid ja vaadates, kas leht jääb täielikult funktsionaalseks.
Ava DevSuite Pro hõljuv dokk ja klõpsa Animatsiooni Inspektori ikoonil. Tööriist skannib lehe kohe ja tuvastab kõik töötavad CSS animatsioonid ja üleminekud.
Ilmub hõljuv paneel, mis loetleb kõik lehel leitud animatsioonid. Iga kirje näitab animatsiooni nime, kestust, easing funktsiooni ja kas see töötab või on peatatud. Loendamise märk näitab tuvastatud animatsioonide koguarvu.
Klõpsa globaalsel Peata nupul, et külmutada kõik animatsioonid üheaegselt. Elemendid jäävad oma praegusesse animatsiooni keskolekusse, võimaldades sul inspekteerida CSS omadusi, teha ekraanipilte või võrrelda positsioone.
Kasuta kiiruse valijat, et aeglustada animatsioone 0.25x peale üksikasjalikuks vaatlemiseks või kiirendada neid 4x peale, et kiiresti läbi käia pikad animatsioonid. Kiiruse muutused rakenduvad koheselt ilma taaskäivitamiseta.
Lohista ajatelje liugurit vasakule ja paremale, et käsitsi animatsiooni läbi liikuda. Leht uueneb reaalajas, näidates sulle täpselt, milline iga kaader välja näeb. Ideaalne tõrgete märkamiseks või easing kõverate kontrollimiseks.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.