Animationer er en kraftfuld tilføjelse til CSS, men deres tekstform kan gøre dem besværlige at arbejde med. Chromes DevTools til undsætning!

CSS-animationer, udført korrekt, kan løfte dit websted til et andet niveau. Men at skabe disse animationer kan være vanskelig uden værktøjer, der giver fin kontrol over dem. Hvad hvis der var en måde at se præcis, hvad der sker på hvert trin i din animation?

DevTools-funktionen i både Google Chrome og Firefox kommer med muligheden for at inspicere dine animationer. Lær, hvordan du bruger denne funktion til at forbedre dine egne animationer og reverse-engineer dine yndlingsanimationer på nettet.

Chromes DevTools er en fantastisk måde at fejlfinde alle aspekter af din CSS, og mere i øvrigt. Start med dette enkle eksempel for at forstå, hvordan du kan bruge det til at inspicere animationer.

Koden til disse eksempler er tilgængelig i et GitHub-lager.

Definer animationer med HTML og CSS

Følgende HTML gengiver en side med to elementer: a og en. 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 at style begge elementer skal du oprette en style.css fil i samme mappe som HTML og tilføj 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 stilarter skaber to komponenter:

  • En simpel boks, der drejer rundt og skifter farve, når siden indlæses.
  • En knap, der ændrer sin baggrundsfarve, når du holder markøren over den.

Bemærk, at den røde boks animerer ved hjælp af CSS @keyframe-direktiv, mens knappen bruger en overgang. Dette lader dig sammenligne de to tilgange ved hjælp af browserens DevTools.

For at få adgang til Animationer fanen i Chrome DevTools:

  1. Højreklik på din side for at få genvejsmenuen frem.
  2. Klik Inspicere.
  3. Klik på de tredobbelte prikker i øverste højre hjørne.
  4. Naviger til Flere værktøjer > Animationer.

Dette åbner animationsskuffen i den nederste sektion.

Eventuelle animationer, der forekommer på din side, vises her. Hvis du opdaterer din side og svæver på knappen, vises animationerne under fanen animationer.

Den virkelige kraft kommer ind, når du klikker på en af ​​disse animationer. For eksempel, hvis du klikker på boksens animation, vil du se, at browseren præsenterer keyframes som følger:

DevTools viser alle animationer relateret til det element, du vælger. Da der kun er en enkelt animation defineret for det røde felt—rotateAndChangeColor- du vil bare se detaljerne.

Du kan trække linjen til venstre for at gøre animationen meget hurtigere eller trække den til højre for at bremse animationen. Du kan også sætte animationen på pause på bestemte punkter ved at skifte mellem pause- og afspilningsikonerne. Procentsatserne øverst giver dig mulighed for at afspille animationen med henholdsvis en fjerdedel af dens normale hastighed og en tiendedel af dens hastighed.

Når du inspicerer knapovergangen, viser DevTools overgangens individuelle egenskaber: farven og baggrundsfarven.

Dette værktøj lader dig manipulere din animation for at se præcis, hvordan den fungerer. Du kan bruge det til fejlfinding på din hjemmeside hvis der er problemer.

Eksempler på avanceret animation

Start med at erstatte markeringen i din HTML 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>

Udskift derefter alle styles 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 bevæge sig i trin animation anvendt på dem, som skifter position og baggrundsfarve. Derudover har hver boks en anden animation til at kontrollere antallet af trin, den vil tage.

Mens den tredje boks glider støt til højre, vil de to første bevæge sig to trin ad gangen, indtil de alle når slutningen af ​​skærmen (med den anden boks starter før den første boks).

Hvis du åbner Animationer fanen i DevTools og opdatere siden, finder du alle oplysningerne vedrørende disse animationer:

Der er flere elementer, der alle animerer i samme periode. I dette scenarie animeres baggrundsfarven og bokspositionen på samme tid for alle tre felter.

En anden ting at bemærke er noderne på hver animationslinje. Når en animation forekommer et uendeligt antal gange, viser noderne, hvor hver gentagelse starter og slutter i animationen.

De tomme noder er hovedsagelig nøgleframes i din animation, mens de ensfarvede, repræsenterer starten og slutningen af ​​animationen. Du vil have mørkefarvede noder, hver gang din animation starter forfra.

Endelig kan du redigere animationerne ved hjælp af DevTools, ligesom du kan med enhver CSS-egenskab. Alle de ændringer, du foretager ved hjælp af animations-UI, vises i de indlejrede stilarter under Stilarter fanen og omvendt. Dette giver dig mulighed for at foretage ændringer, teste dem og kopiere dem til dit egentlige projekt.

DevTools-funktionen i Google Chrome er et fantastisk værktøj til fejlretning af din CSS, inklusive animationer. Det giver en detaljeret visning af hver overgang og animation på din side, så du kan se præcis, hvad der sker ved hvert trin.

Som webudvikler bør du være bekendt med din browsers DevTools-funktion eller tilsvarende.