Uw CSS-animaties inspecteren met Chrome DevTools
CSS-animaties kunnen, als ze goed worden uitgevoerd, je site naar een hoger niveau tillen. Maar het maken van deze animaties kan lastig zijn zonder tools die fijne controle bieden. Wat als er een manier was om precies te zien wat er gebeurt bij elke stap van je animatie?
Door gebruik te maken van de DevTools-functionaliteit in zowel Google Chrome als Mozilla Firefox, kun je inzicht krijgen in je geanimeerde creaties en deze nabootsen op verschillende websites.
Debuggen van basisanimaties met DevTools
De Developer Tools van Google Chrome bieden een reeks handige functies voor het debuggen van verschillende facetten van webontwikkeling, inclusief maar niet beperkt tot CSS. Met deze veelzijdige tool kunnen gebruikers de prestaties van hun website onderzoeken en analyseren, potentiële problemen identificeren en ontwerpelementen optimaliseren. Om te beginnen kan het handig zijn om de Developer Tools te gebruiken om animaties in hun projecten te onderzoeken.
De broncode voor deze illustraties is toegankelijk via een GitHub-repository, die dient als digitale opslagplaats voor softwareontwikkelingsprojecten en samenwerking tussen ontwikkelaars vergemakkelijkt door versiebeheerfuncties en hulpmiddelen te bieden om wijzigingen in de codebase te beheren.
Animaties definiëren met HTML en CSS
een div-element en een knop-element. Daarnaast bevat het een CSS-document getiteld “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>
Om beide elementen een consistent uiterlijk te geven, moet er een CSS-bestand (Cascading Style Sheets) worden gemaakt in dezelfde map als het HTML-document. Dit bestand moet de volgende code bevatten:
#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;
}
}
Deze stijlen creëren twee componenten:
Een visueel boeiende, geanimeerde box die draait en van tint verandert bij het laden van de webpagina.
Het gebruikersinterface-element dat bekend staat als een “knop” ondergaat een visuele transformatie door zijn “achtergrondkleur” te veranderen als reactie op gebruikersinvoer, met name wanneer de cursor of aanwijzer erboven staat en geen contact maakt met een ander object op het scherm. Deze verandering vindt plaats door het proces van “zweven”, dat een gebeurtenis in de browser of toepassingssoftware triggert waardoor het uiterlijk van de knop tijdelijk wordt gewijzigd.
Het gebruik van de richtlijn CSS @keyframes maakt animatie van het rode vak mogelijk, terwijl de knop een overgang gebruikt voor zijn transformatie. Het vergelijken van deze technieken kan worden vergemakkelijkt door het onderzoeken van hun respectievelijke toepassingen in de Developer Tools van de browser.
Animaties inspecteren met DevTools
Voer de volgende stappen uit om toegang te krijgen tot het tabblad “Animaties” in de Chrome Developer Tools:
Door met de rechtermuisknop te klikken op uw huidige webpagina roept u het contextmenu op, dat verschillende opties bevat voor het manipuleren van of interactie met de inhoud die op het scherm wordt weergegeven.
⭐ClickInspect.
Klik op de drie verticale stippen in de rechterbovenhoek van het scherm.
Open de optie “Animaties” door naar de categorie “Meer hulpmiddelen” te gaan en deze daar te selecteren.
Deze actie toont een visuele weergave van animaties in het onderste deel van de interface, zodat gebruikers deze effecten kunnen openen en manipuleren.
Alle visuele effecten die zich op deze webpagina manifesteren, worden in dit gedeelte weergegeven. Als de pagina opnieuw wordt geladen en de cursor op het gespecificeerde element wordt geplaatst, worden de bovengenoemde animatiesequenties weergegeven op het aangewezen tabblad “Animaties” wanneer het weergavegebied van de inhoud wordt vernieuwd.
Als je op een van deze animaties klikt, zoals bijvoorbeeld de animatie van de box, geeft de browser de keyframes weer op een manier die de implementatiestrategie illustreert.
De Developer Tools tonen een overzicht van alle animaties die bij het geselecteerde element horen, aangezien er maar één animatieproces is afgebakend voor de rode container - rotatie en kleurverandering - worden alleen de specifieke details met betrekking tot deze animatie weergegeven in de interface.
U kunt de positie van de afspeelkop op de tijdlijn aanpassen om het tempo van de visuele sequentie te regelen, door de voortgang te versnellen of te vertragen, afhankelijk van uw voorkeur. Daarnaast kan de animatie op specifieke momenten worden gepauzeerd door te wisselen tussen het afspeel- en pauzepictogram, zodat je meer controle hebt over de kijkervaring. Bovendien kun je met de percentages aan het begin van de tijdlijn het tempo van de animatie manipuleren, zodat je een lagere snelheid van 25% of een nog lagere snelheid van 10% kunt instellen.
Als je het gedrag van een knop onderzoekt met de Developer Tools, kun je de specifieke attributen bekijken die bijdragen aan de visuele transformatie, zoals de kleur en achtergrondkleur.
Met dit hulpprogramma kunt u uw animaties wijzigen om een beter inzicht te krijgen in hun functionaliteit.Het stelt je in staat om eventuele problemen met je website te diagnosticeren en op te lossen.
Geavanceerde animatievoorbeelden
Integreer de geleverde opmaak in het element van een HTML-document, als volgt:
<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>
Neem het bijgeleverde codefragment op in de sectie