Så här inspekterar du dina CSS-animationer med Chrome DevTools
CSS-animationer kan, om de används på rätt sätt, lyfta din webbplats till en ny nivå. Men det kan vara svårt att skapa dessa animationer 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 animationen?
Genom att använda DevTools-funktionen i både Google Chrome och Mozilla Firefox kan man få insikt i sina animerade skapelser och replikera dem som finns på olika webbplatser.
Grundläggande felsökning av animationer med DevTools
Google Chromes utvecklarverktyg erbjuder en rad användbara funktioner för felsökning av olika aspekter av webbutveckling, inklusive men inte begränsat till CSS. Med detta mångsidiga verktyg kan användarna utforska och analysera webbplatsens prestanda, identifiera potentiella problem och optimera designelement. Som en startpunkt kan det vara bra att använda utvecklarverktygen för att granska och undersöka animationer i sina projekt.
Källkoden för dessa illustrationer kan nås via ett GitHub-arkiv, som fungerar som en digital lagringsplats för programutvecklingsprojekt och underlättar samarbete mellan utvecklare genom att tillhandahålla funktioner för versionskontroll och verktyg för att hantera ändringar som görs i kodbasen.
Definiera animationer med HTML och CSS
ett div-element och ett knappelement. Dessutom innehåller den ett CSS-dokument med titeln “style.css”.
<!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="style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
För att båda dessa element ska få ett enhetligt utseende är det nödvändigt att generera en CSS-fil (Cascading Style Sheets) i samma katalog som HTML-dokumentet. Denna fil ska innehålla följande kod:
#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 visuellt fängslande, animerad ruta som roterar och ändrar nyans när webbsidan laddas.
Det användargränssnittselement som kallas “knapp” genomgår en visuell omvandling genom att ändra sin “bakgrundsfärg” som svar på användarens input, särskilt när markören eller pekaren är placerad ovanför den och inte kommer i kontakt med något annat objekt på skärmen. Denna förändring sker genom processen “hovering”, som utlöser en händelse i webbläsaren eller applikationsprogramvaran som gör att knappens utseende ändras tillfälligt.
Användningen av CSS-direktivet @keyframes möjliggör animering av den röda rutan, medan knappen använder en övergång för sin omvandling. Att jämföra dessa tekniker kan underlättas genom att undersöka deras respektive applikationer i webbläsarens Developer Tools.
Inspektera animationer med DevTools
Följ dessa steg för att få tillgång till fliken “Animationer” i Chrome Developer Tools:
Om du högerklickar på den aktuella webbsidan öppnas snabbmenyn, som innehåller olika alternativ för att manipulera eller interagera med innehållet som visas på skärmen.
⭐KlickaInspektera.
Klicka på de tre vertikala prickarna längst upp till höger på skärmen.
Öppna alternativet “Animationer” genom att navigera till kategorin “Fler verktyg” och välja det därifrån.
Denna åtgärd exponerar en visuell representation av animationer i den nedre delen av gränssnittet, vilket gör det möjligt för användare att komma åt och manipulera dessa effekter.
Alla visuella effekter som manifesteras på denna webbsida ska visas i detta avsnitt. Om du laddar om sidan och placerar markören över det angivna elementet, ska de ovannämnda animationssekvenserna visas på den angivna fliken “Animationer” vid uppdatering av visningsområdet för innehåll.
Om man klickar på någon av dessa animationer, t.ex. boxens animation, kommer webbläsaren att visa keyframes på ett sätt som illustrerar dess implementeringsstrategi.
Utvecklarverktygen visar en översikt över alla animationer som är kopplade till det valda elementet, eftersom endast en animerad process är definierad för den röda behållaren - rotation och färgförändring - kommer följaktligen endast de specifika detaljerna för denna animation att visas i gränssnittet.
Du kan justera spelhuvudets position längs tidslinjen för att styra takten i den visuella sekvensen, antingen påskynda eller fördröja dess progression beroende på vad du föredrar. Dessutom kan animeringen pausas vid specifika tillfällen genom att växla mellan play- och pausikonerna, vilket ger dig större kontroll över visningsupplevelsen. De angivna procentsatserna i början av tidslinjen gör det dessutom möjligt att påverka animeringens tempo, antingen med en minskad hastighet på 25 % eller en ännu långsammare hastighet på 10 %.
När man undersöker hur en knapp beter sig med hjälp av utvecklarverktygen kan man se vilka specifika attribut som bidrar till den visuella omvandlingen, t.ex. färg och bakgrundsfärg.
Detta verktyg ger dig möjlighet att modifiera dina animationer för att få en omfattande förståelse för deras funktionalitet.Det gör att du kan diagnostisera och lösa eventuella problem som kan uppstå med din webbplats, om det skulle finnas några problem.
Avancerade animeringsexempel
Infoga den medföljande markeringen i elementet i ett HTML-dokument, enligt följande:
<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>
Infoga det medföljande kodavsnittet i avsnittet