Animaatiotarkastin antaa sinulle täydellisen hallinnan jokaiseen verkkosivulla suoritettavaan CSS-animaatioon ja siirtymään. Pysäytä kaikki animaatiot kerralla, hidasta ne ruutu kerrallaan tarkastettaviksi, nopeuta suorituskyvyn testaamiseksi tai selaa aikajanaa manuaalisesti — kaikki yhdestä kelluvasta paneelista ilman selaimen DevToolsia.
CSS-animaatiot voivat olla hankalia debugata. Ne tapahtuvat nopeasti, menevät päällekkäin ja selaimen DevTools pakottaa etsimään animaatio-ominaisuuksia lasketuista tyyleistä. Animaatiotarkastin ratkaisee tämän tunnistamalla automaattisesti kaikki sivun @keyframes-animaatiot ja CSS-siirtymät, listaamalla ne täydellisine kokoonpanoineen (kesto, helpotus, viive, toistomäärä) ja tarjoamalla toistosäätimet, jotka toimivat joko globaalisti tai animaatiokohtaisesti. Olipa kyse nykivän hover-efektin debuggauksesta, sivun sisääntuloanimaation ajoituksen hienosäätämisestä tai monimutkaisen animaatiokirjaston toimintaperiaatteen ymmärtämisestä — tämä työkalu antaa sinulle hallinnan.
Jäädytä kaikki sivun animaatiot välittömästi yhdellä napsautuksella. Kaikki animaatiot pysähtyvät nykyiseen asentoonsa — ne eivät palaa alkuun. Paina play jatkaaksesi tarkalleen siitä, mihin ne jäivät. Välttämätön animaatioiden kesken olevien tilojen tarkastamiseen, joita on mahdoton havaita paljaalla silmällä.
Säädä kaikkien animaatioiden toistonopeutta samanaikaisesti. Valitse 0,25x (neljäsosa nopeudesta), 0,5x, 1x (normaali), 2x tai 4x. Nopeudella 0,25x jopa nopein 200 ms:n siirtymä on helppo havainnoida ja debugata.
Jokainen sivun CSS-animaatio ja siirtymä tunnistetaan automaattisesti ja näytetään vieritettävässä listassa. Kukin merkintä näyttää animaation nimen (tai siirtymäominaisuuden), keston, ajoitusfunktion (ease, linear, cubic-bezier), viiveen, toistomäärän ja nykyisen suoritustilan.
Vedä aikajanaselain liikkuaksesi manuaalisesti animaation läpi ruutu kerrallaan. Näe tarkalleen, mitä tapahtuu 25 %:n, 50 %:n tai missä tahansa kohdassa animaatiosyklissä. Sivu päivittyy reaaliajassa kun vedät.
Pysäytä, toista tai säädä nopeutta yksittäisille animaatioille itsenäisesti. Eristä yksi animaatio debugataksesi sen ilman, että muut sivun liikkuvat elementit häiritsevät.
Napsauta mitä tahansa listalla olevaa animaatiota nähdäksesi sen täydellisen CSS-ilmoituksen — @keyframes-määritelmä, animation-pikakuvauksen erittely, lasketut alku- ja lopputilat sekä mihin elementteihin se on sovellettu.
Animaatiotarkastin 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-origintranslaterotatescaleskewHidasta animaatiota 0,25x-nopeuteen tunnistaaksesi tarkalleen, missä kohtaa nykiminen tai tökkiminen tapahtuu. Tarkista, johtuuko ongelma layout-ylikuormituksesta (leveyden/korkeuden sijaan transformin animointi), väärästä helpotuksesta tai saman elementin ristiriitaisista animaatioista.
Käytä aikajanan selausta nähdäksesi, miltä cubic-bezier-helpotuskäyrä todella näyttää käytännössä. Vertaa ease-in vs ease-out -käyttäytymistä tietyissä prosenteissa. Säädä arvoja ja toista, kunnes liike tuntuu oikealta.
Vieraile vaikuttavia animaatioita sisältävällä verkkosivustolla (laskeutumissivut, portfolio-sivut) ja tarkasta tarkalleen, miten ne on rakennettu. Katso @keyframes-määritelmät, ajoitusarvot ja elementtikohdistus, joka mahdollistaa monimutkaisten sekvenssien toiminnan.
Varmista, että hover-efektit, latausspinnerit, skeleton-ruudut ja sivusiirtymät kaikki toimivat oikein. Pysäytä kesken oleviin tiloihin tarkistaaksesi visuaaliset häiriöt, kuten elementtien päällekkäisyys, väärä z-index animaation aikana tai sisällön uudelleenjuoksu.
Tunnista animaatiot, jotka saattavat aiheuttaa ongelmia vestibulaarisista häiriöistä kärsiville käyttäjille. Tarkista, kunnioitetaanko prefers-reduced-motion-asetusta asianmukaisesti pysäyttämällä kaikki animaatiot ja tarkistamalla, pysyykö sivu täysin toimivana.
Avaa DevSuite Pron kelluva telakka ja napsauta Animaatiotarkastimen kuvaketta. Työkalu skannaa sivun välittömästi ja tunnistaa kaikki käynnissä olevat CSS-animaatiot ja siirtymät.
Kelluva paneeli ilmestyy listaten kaikki sivulla löydetyt animaatiot. Kukin merkintä näyttää animaation nimen, keston, helpotustoiminnon sekä sen, onko se tällä hetkellä käynnissä vai pysäytetty. Määrämerkki näyttää havaittujen animaatioiden kokonaismäärän.
Napsauta globaalia Pysäytä-painiketta jäädyttääksesi kaikki animaatiot samanaikaisesti. Elementit pysyvät nykyisessä animaation kesken olevassa tilassaan, jolloin voit tarkastaa CSS-ominaisuudet, ottaa kuvakaappauksia tai vertailla sijainteja.
Käytä nopeusvalitsinta hidastaaksesi animaatiot 0,25x-nopeuteen yksityiskohtaista havainnointia varten tai nopeuttaaksesi 4x:ään kierrätellen nopeasti pitkiä animaatioita. Nopeuden muutokset astuvat voimaan välittömästi ilman uudelleenkäynnistystä.
Vedä aikajanaselain vasemmalle ja oikealle liikkuaksesi manuaalisesti animaation läpi. Sivu päivittyy reaaliajassa näyttäen tarkalleen, miltä jokainen ruutu näyttää. Täydellinen häiriöiden havaitsemiseen tai helpotuskäyrien tarkistamiseen.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.