Animaties zijn een krachtige toevoeging aan CSS, maar door hun tekstvorm kunnen ze lastig zijn om mee te werken. Chrome's DevTools schiet te hulp!

CSS-animaties kunnen, als ze op de juiste manier worden uitgevoerd, uw site naar een hoger niveau tillen. Maar het maken van deze animaties kan lastig zijn zonder tools die er nauwkeurige controle over bieden. Wat als er een manier was om precies te zien wat er gebeurt bij elke stap van uw animatie?

De DevTools-functie van zowel Google Chrome als Firefox biedt de mogelijkheid om uw animaties te inspecteren. Leer hoe u deze functie kunt gebruiken om uw eigen animaties te verbeteren en uw favoriete animaties op internet te reverse-engineeren.

DevTools van Chrome is een geweldige manier om dat te doen debug alle aspecten van uw CSS, en nog veel meer. Begin met dit eenvoudige voorbeeld om te begrijpen hoe u het kunt gebruiken om animaties te inspecteren.

De code voor deze voorbeelden is beschikbaar in een GitHub-repository.

Definieer animaties met HTML en CSS

instagram viewer

De volgende HTML rendert een pagina met twee elementen: en een. De pagina importeert ook een CSS-bestand met de naam stijl.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Om beide elementen te stylen, maak je een stijl.css bestand in dezelfde map als de HTML en voeg het volgende toe:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-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 eenvoudige doos die draait en van kleur verandert wanneer de pagina wordt geladen.
  • Een knop waarvan de achtergrondkleur verandert als u erover beweegt.

Merk op dat het rode vak animeert met behulp van de CSS @keyframe-richtlijn, terwijl de knop een overgang gebruikt. Hiermee kunt u de twee benaderingen vergelijken met behulp van de DevTools van de browser.

Om toegang te krijgen tot de Animaties tabblad in Chrome DevTools:

  1. Klik met de rechtermuisknop op uw pagina om het contextmenu te openen.
  2. Klik Inspecteren.
  3. Klik op de drievoudige stippen in de rechterbovenhoek.
  4. Navigeren naar Meer Tools > Animaties.

Hierdoor wordt de animatielade in het onderste gedeelte geopend.

Alle animaties die op uw pagina voorkomen, worden hier weergegeven. Als u uw pagina vernieuwt en op de knop zweeft, verschijnen de animaties onder het tabblad animaties.

De echte kracht komt binnen als je op een van deze animaties klikt. Als u bijvoorbeeld op de animatie van het vak klikt, ziet u dat de browser de sleutelframes als volgt presenteert:

De DevTools geven alle animaties weer die betrekking hebben op het element dat u selecteert. Omdat er slechts één enkele animatie is gedefinieerd voor het rode vak:roterenEnChangeColor- je ziet alleen de details ervan.

U kunt de lijn naar links slepen om de animatie veel sneller te maken, of naar rechts slepen om de animatie te vertragen. Je kunt de animatie op bepaalde punten ook pauzeren door de pictogrammen voor pauzeren en afspelen te wisselen. Met de percentages bovenaan kun je de animatie respectievelijk op een kwart van de normale snelheid en een tiende van de snelheid afspelen.

Wanneer u de knopovergang inspecteert, toont DevTools de individuele eigenschappen van de overgang: de kleur en achtergrondkleur.

Met deze tool kunt u uw animatie manipuleren om precies te zien hoe deze werkt. Je kunt het gebruiken problemen met uw website oplossen als er problemen zijn.

Geavanceerde animatievoorbeelden

Begin met het vervangen van de markeringen in uw HTML tag met de volgende opmaak:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Vervang vervolgens alle stijlen in uw stijl.css bestand met dit:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Al de elementen hebben de beweging-in-stappen animatie die erop wordt toegepast, waardoor de positie en de achtergrondkleur overgaan. Daarnaast heeft elke doos een andere animatie om het aantal stappen te bepalen.

Terwijl het derde vak gestaag naar rechts schuift, bewegen de eerste twee twee stappen tegelijk totdat ze allemaal het einde van het scherm bereiken (waarbij het tweede vak vóór het eerste vak begint).

Als u de Animaties tabblad in DevTools en vernieuw de pagina, u vindt alle informatie met betrekking tot deze animaties:

Er zijn verschillende elementen die allemaal in dezelfde periode animeren. In dit scenario worden de achtergrondkleur en de vakpositie voor alle drie de vakken tegelijkertijd geanimeerd.

Een ander ding om op te merken zijn de knooppunten op elke animatielijn. Wanneer een animatie een oneindig aantal keren voorkomt, laten de knooppunten zien waar elke herhaling in de animatie begint en eindigt.

De lege knooppunten zijn in wezen de hoofdframes in uw animatie, terwijl de effen, gekleurde knooppunten het begin en einde van de animatie vertegenwoordigen. Elke keer dat je animatie opnieuw begint, heb je donkergekleurde knooppunten.

Ten slotte kunt u de animaties bewerken met DevTools, net zoals u kunt met elke CSS-eigenschap. Alle wijzigingen die u aanbrengt met behulp van de animatie-UI zullen verschijnen in de inline-stijlen onder de Stijlen tabblad, en omgekeerd. Hiermee kunt u wijzigingen aanbrengen, testen en naar uw daadwerkelijke project kopiëren.

De DevTools-functie van Google Chrome is een geweldig hulpmiddel voor het debuggen van uw CSS, inclusief animaties. Het biedt een gedetailleerd overzicht van elke overgang en animatie op uw pagina, zodat u precies kunt zien wat er bij elke stap gebeurt.

Als webontwikkelaar moet u bekend zijn met de DevTools-functie van uw browser, of het equivalent daarvan.