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 fejlsøge alle aspekter af din CSS på og mere. Start med dette enkle eksempel for at forstå, hvordan du kan bruge det til at inspicere animationer.
Indholdsfortegnelse
Definer animationer med HTML og CSS
Følgende HTML gengiver 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 at style begge elementer skal du oprette en style.css-fil i samme mappe som HTML og tilføje 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 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 det røde felt animerer ved hjælp af CSS @keyframe-direktivet, mens knappen bruger en overgang. Dette lader dig sammenligne de to tilgange ved hjælp af browserens DevTools.
Undersøg animationer ved hjælp af DevTools
Sådan får du adgang til fanen Animationer i Chrome DevTools:
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 defineret en enkelt animation for det røde felt – rotateAndChangeColor – vil du kun 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 at fejlfinde dit websted, hvis der er problemer.
Eksempler på avanceret animation
Start med at erstatte markeringen i dit HTML
-tag med følgende markup:<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>
Erstat 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 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 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 fanen Animationer i DevTools og opdaterer siden, vil du finde alle oplysninger 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 animationsbrugergrænsefladen, vises i de inline-stile under fanen Styles 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 fortrolig med din browsers DevTools-funktion eller tilsvarende.