Animasjoner er et kraftig tillegg til CSS, men tekstformen deres kan gjøre dem vanskelige å jobbe med. Chromes DevTools til unnsetning!

CSS-animasjoner, utført på riktig måte, kan heve nettstedet ditt til et annet nivå. Men å lage disse animasjonene kan være vanskelig uten verktøy som gir fin kontroll over dem. Hva om det var en måte å se nøyaktig hva som skjer på hvert trinn i animasjonen din?

DevTools-funksjonen til både Google Chrome og Firefox kommer med muligheten til å inspisere animasjonene dine. Lær hvordan du bruker denne funksjonen til å forbedre dine egne animasjoner og reversere dine favorittanimasjoner på nettet.

Chromes DevTools er en fin måte å feilsøk alle aspekter av CSS, og mer i tillegg. Start med dette enkle eksemplet for å forstå hvordan du kan bruke det til å inspisere animasjoner.

Koden for disse eksemplene er tilgjengelig i et GitHub-depot.

Definer animasjoner med HTML og CSS

Følgende HTML gjengir en side med to elementer: a og a. Siden importerer også en CSS-fil med navnet style.css:

instagram viewer 
html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

For å style begge elementene, lag en style.css fil i samme mappe som HTML og legg til følgende:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

Disse stilene lager to komponenter:

  • En enkel boks som snurrer og endrer farge når siden lastes.
  • En knapp som endrer bakgrunnsfargen når du holder musepekeren over den.

Merk at den røde boksen animerer ved hjelp av CSS @keyframe-direktiv, mens knappen bruker en overgang. Dette lar deg sammenligne de to tilnærmingene ved å bruke nettleserens DevTools.

For å få tilgang til Animasjoner fanen i Chrome DevTools:

  1. Høyreklikk på siden din for å få frem kontekstmenyen.
  2. Klikk Undersøke.
  3. Klikk på de trippelpunktene i øverste høyre hjørne.
  4. Navigere til Flere verktøy > Animasjoner.

Dette vil åpne animasjonsskuffen i den nederste delen.

Eventuelle animasjoner som forekommer på siden din, vises her. Hvis du oppdaterer siden og holder musepekeren på knappen, vil animasjonene vises under animasjonsfanen.

Den virkelige kraften kommer inn når du klikker på en av disse animasjonene. For eksempel, hvis du klikker på boksens animasjon, vil du se at nettleseren presenterer nøkkelbildene som følger:

DevTools viser alle animasjoner relatert til elementet du velger. Siden det bare er en enkelt animasjon definert for den røde boksen—rotateAndChangeColor– du vil bare se detaljene.

Du kan dra linjen til venstre for å gjøre animasjonen mye raskere eller dra den til høyre for å bremse animasjonen. Du kan også sette animasjonen på pause på bestemte punkter ved å veksle mellom pause- og spillikonene. Prosentene på toppen lar deg spille av animasjonen med henholdsvis en fjerdedel av normal hastighet og en tiendedel av hastigheten.

Når du inspiserer knappovergangen, vil DevTools vise de individuelle egenskapene til overgangen: fargen og bakgrunnsfargen.

Dette verktøyet lar deg manipulere animasjonen din for å se nøyaktig hvordan den fungerer. Du kan bruke den til feilsøk nettstedet ditt hvis det er noen problemer.

Eksempler på avansert animasjon

Start med å erstatte markeringen i HTML-koden din tag med følgende markering:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Bytt deretter ut alle stilene i din style.css fil med denne:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Alle elementer har flytte-i-trinn animasjon brukt på dem, som overfører posisjon og bakgrunnsfarge. I tillegg til det har hver boks en annen animasjon for å kontrollere antall trinn den vil ta.

Mens den tredje boksen glir jevnt til høyre, vil de to første bevege seg to trinn om gangen til de alle når slutten av skjermen (med den andre boksen som starter før den første boksen).

Hvis du åpner Animasjoner fanen i DevTools og oppdater siden, finner du all informasjon knyttet til disse animasjonene:

Det er flere elementer som alle animerer over samme periode. I dette scenariet animeres bakgrunnsfargen og boksposisjonen samtidig for alle tre boksene.

En annen ting å merke seg er nodene på hver animasjonslinje. Når en animasjon forekommer et uendelig antall ganger, viser nodene hvor hver repetisjon starter og slutter i animasjonen.

De tomme nodene er i hovedsak nøkkelbildene i animasjonen din, mens de solide, fargede representerer starten og slutten av animasjonen. Du vil ha mørkefargede noder hver gang animasjonen starter på nytt.

Til slutt kan du redigere animasjonene ved hjelp av DevTools, akkurat som du kan med en hvilken som helst CSS-egenskap. Alle endringene du gjør ved å bruke animasjonsgrensesnittet vil vises i de innebygde stilene under Stiler fanen og omvendt. Dette lar deg gjøre endringer, teste dem ut og kopiere dem til ditt faktiske prosjekt.

DevTools-funksjonen til Google Chrome er et kjempebra verktøy for å feilsøke CSS-en din, inkludert animasjoner. Den gir en detaljert oversikt over hver overgang og animasjon på siden din, slik at du kan se nøyaktig hva som skjer ved hvert trinn.

Som nettutvikler bør du være kjent med nettleserens DevTools-funksjon, eller tilsvarende.