Slik inspiserer du CSS-animasjonene dine med Chrome DevTools
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 flott måte å feilsøke alle aspekter av CSS-en din, og mer i tillegg. Start med dette enkle eksemplet for å forstå hvordan du kan bruke det til å inspisere animasjoner.
Innholdsfortegnelse
Definer animasjoner med HTML og CSS
Følgende HTML gjengir en side med to elementer: en
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
For å style begge elementene, lag en style.css-fil i samme mappe som HTML-en og legg til følgende:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-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 å bruke CSS @keyframe-direktivet, mens knappen bruker en overgang. Dette lar deg sammenligne de to tilnærmingene ved å bruke nettleserens DevTools.
Inspiser animasjoner ved hjelp av DevTools
Slik får du tilgang til Animasjoner-fanen i Chrome DevTools:
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 – vil du 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øke nettstedet ditt hvis det er noen problemer.
Eksempler på avansert animasjon
Start med å erstatte markeringen i HTML-koden
med følgende markering:<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>
Erstatt deretter alle stilene i style.css-filen 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 8s steps(4, end) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
Alle
Mens den tredje boksen glir jevnt til høyre, vil de to første flytte 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 fanen Animasjoner i DevTools og oppdaterer siden, vil du finne all informasjon om 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, vises i de innebygde stilene under kategorien Stiler, 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 webutvikler bør du være kjent med nettleserens DevTools-funksjon, eller tilsvarende.
