CSS-animationer, gjorda på rätt sätt, kan lyfta din webbplats till en annan nivå. Men att skapa dessa animationer kan vara knepigt utan verktyg som ger fin kontroll över dem. Tänk om det fanns ett sätt att se exakt vad som händer i varje steg av din animering?
DevTools-funktionen i både Google Chrome och Firefox kommer med möjligheten att inspektera dina animationer. Lär dig hur du använder den här funktionen för att förbättra dina egna animationer och omvända dina favoritanimationer på webben.
Chromes DevTools är ett utmärkt sätt att felsöka alla aspekter av din CSS, och mer därtill. Börja med detta enkla exempel för att förstå hur du kan använda det för att inspektera animationer.
Innehållsförteckning
Definiera animationer med HTML och CSS
Följande HTML renderar en sida med två element: 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>
För att formatera båda elementen, skapa en style.css-fil i samma mapp som HTML-filen och lägg till följande:
#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;
}
}
Dessa stilar skapar två komponenter:
- En enkel låda som snurrar och ändrar färg när sidan laddas.
- En knapp som ändrar bakgrundsfärg när du håller muspekaren över den.
Observera att den röda rutan animeras med CSS @keyframe-direktivet, medan knappen använder en övergång. Detta låter dig jämföra de två metoderna med hjälp av webbläsarens DevTools.
Inspektera animationer med hjälp av DevTools
Så här kommer du till fliken Animationer i Chrome DevTools:
Detta öppnar animationslådan i den nedre delen.
Alla animationer som förekommer på din sida kommer att visas här. Om du uppdaterar din sida och håller muspekaren över knappen kommer animationerna att dyka upp under fliken animationer.
Den verkliga kraften kommer in när du klickar på en av dessa animationer. Om du till exempel klickar på rutans animering ser du att webbläsaren presenterar nyckelbildrutorna enligt följande:
DevTools visar alla animationer som är relaterade till det element du väljer. Eftersom det bara finns en enda animation definierad för den röda rutan – rotateAndChangeColor – kommer du bara att se dess detaljer.
Du kan dra linjen åt vänster för att göra animeringen mycket snabbare eller dra den åt höger för att sakta ner animeringen. Du kan också pausa animeringen vid vissa punkter genom att växla mellan paus- och uppspelningsikonerna. Procentsatserna överst låter dig spela upp animationen med en fjärdedel av dess normala hastighet respektive en tiondel av dess hastighet.
När du inspekterar knappövergången kommer DevTools att visa de individuella egenskaperna för övergången: färgen och bakgrundsfärgen.
Det här verktyget låter dig manipulera din animation för att se exakt hur den fungerar. Du kan använda den för att felsöka din webbplats om det finns några problem.
Avancerade animationsexempel
Börja med att ersätta märkningen i din HTML
-tagg med följande märkning:<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>
Byt sedan ut alla stilar i din style.css-fil med detta:
.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;
}
}
Alla
Medan den tredje rutan stadigt glider åt höger, kommer de två första att flytta två steg åt gången tills de alla når slutet av skärmen (med den andra rutan som börjar före den första rutan).
Om du öppnar fliken Animationer i DevTools och uppdaterar sidan, hittar du all information om dessa animationer:
Det finns flera element som alla animerar under samma period. I det här scenariot animeras bakgrundsfärgen och boxpositionen samtidigt för alla tre rutor.
En annan sak att notera är noderna på varje animationsrad. När en animering sker ett oändligt antal gånger visar noderna var varje upprepning börjar och slutar i animeringen.
De tomma noderna är i huvudsak nyckelbildrutorna i din animation, medan de solida, färgade representerar början och slutet av animeringen. Du kommer att ha mörka noder varje gång din animation börjar om.
Slutligen kan du redigera animationerna med hjälp av DevTools, precis som du kan med vilken CSS-egenskap som helst. Alla ändringar du gör med animeringsgränssnittet kommer att dyka upp i de infogade stilarna under fliken Stilar och vice versa. Detta låter dig göra ändringar, testa dem och kopiera dem till ditt faktiska projekt.
DevTools-funktionen i Google Chrome är ett fantastiskt verktyg för att felsöka din CSS, inklusive animationer. Det ger en detaljerad bild av varje övergång och animering på din sida, så att du kan se exakt vad som händer vid varje steg.
Som webbutvecklare bör du vara bekant med din webbläsares DevTools-funktion, eller motsvarande.