Animationen sind eine leistungsstarke Ergänzung zu CSS, die Arbeit mit ihnen kann jedoch aufgrund ihrer Textform umständlich sein. Die DevTools von Chrome zur Rettung!

Richtig durchgeführte CSS-Animationen können Ihre Website auf ein neues Niveau heben. Aber das Erstellen dieser Animationen kann ohne Tools, die eine genaue Kontrolle über sie ermöglichen, schwierig sein. Was wäre, wenn es eine Möglichkeit gäbe, bei jedem Schritt Ihrer Animation genau zu sehen, was passiert?

Die DevTools-Funktion von Google Chrome und Firefox bietet die Möglichkeit, Ihre Animationen zu überprüfen. Erfahren Sie, wie Sie diese Funktion verwenden, um Ihre eigenen Animationen zu verbessern und Ihre Lieblingsanimationen im Web zurückzuentwickeln.

Die DevTools von Chrome sind eine großartige Möglichkeit dazu Debuggen Sie alle Aspekte Ihres CSS, und noch mehr. Beginnen Sie mit diesem einfachen Beispiel, um zu verstehen, wie Sie damit Animationen überprüfen können.

Der Code für diese Beispiele ist verfügbar in ein GitHub-Repository.

instagram viewer

Definieren Sie Animationen mit HTML und CSS

Der folgende HTML-Code rendert eine Seite mit zwei Elementen: a und ein. Die Seite importiert auch eine CSS-Datei mit dem Namen style.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>

Um beide Elemente zu gestalten, erstellen Sie ein style.css Datei im selben Ordner wie die HTML-Datei und fügen Sie Folgendes hinzu:

#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;
 }
}

Diese Stile bilden zwei Komponenten:

  • Ein einfaches Feld, das sich dreht und die Farbe ändert, wenn die Seite geladen wird.
  • Eine Schaltfläche, deren Hintergrundfarbe sich ändert, wenn Sie mit der Maus darüber fahren.

Beachten Sie, dass das rote Feld mithilfe von animiert wird CSS @keyframe-Direktive, während die Schaltfläche einen Übergang verwendet. Auf diese Weise können Sie die beiden Ansätze mithilfe der DevTools des Browsers vergleichen.

Um auf die zuzugreifen Animationen Registerkarte in Chrome DevTools:

  1. Klicken Sie mit der rechten Maustaste auf Ihre Seite, um das Kontextmenü aufzurufen.
  2. Klicken Prüfen.
  3. Klicken Sie auf die dreifachen Punkte in der oberen rechten Ecke.
  4. Navigieren Sie zu Weitere Tools > Animationen.

Dadurch wird die Animationsschublade im unteren Bereich geöffnet.

Alle Animationen, die auf Ihrer Seite auftreten, werden hier angezeigt. Wenn Sie Ihre Seite aktualisieren und mit der Maus über die Schaltfläche fahren, werden die Animationen auf der Registerkarte „Animationen“ angezeigt.

Die wahre Kraft entfaltet sich, wenn Sie auf eine dieser Animationen klicken. Wenn Sie beispielsweise auf die Animation des Felds klicken, werden die Keyframes im Browser wie folgt angezeigt:

Die DevTools zeigen alle Animationen an, die sich auf das von Ihnen ausgewählte Element beziehen. Da für das rote Feld nur eine einzige Animation definiert ist:rotierenAndChangeColor– Sie sehen nur die Details.

Sie können die Linie nach links ziehen, um die Animation viel schneller zu machen, oder nach rechts ziehen, um die Animation zu verlangsamen. Sie können die Animation auch an bestimmten Stellen anhalten, indem Sie die Pause- und Wiedergabesymbole umschalten. Mit den Prozentangaben oben können Sie die Animation mit einem Viertel ihrer normalen Geschwindigkeit bzw. einem Zehntel ihrer Geschwindigkeit abspielen.

Wenn Sie den Schaltflächenübergang untersuchen, zeigt DevTools die einzelnen Eigenschaften des Übergangs an: die Farbe und die Hintergrundfarbe.

Mit diesem Tool können Sie Ihre Animation manipulieren, um genau zu sehen, wie sie funktioniert. Sie können es dazu verwenden Fehlerbehebung auf Ihrer Website wenn es irgendwelche Probleme gibt.

Erweiterte Animationsbeispiele

Ersetzen Sie zunächst das Markup in Ihrem HTML Tag mit folgendem Markup:


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>

Ersetzen Sie dann alle Stile in Ihrem style.css Datei mit dieser:

.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;
 }
}

All die Elemente haben die Schritt für Schritt Auf sie wird eine Animation angewendet, die die Position und die Hintergrundfarbe verändert. Darüber hinaus verfügt jede Box über eine andere Animation, um die Anzahl der Schritte zu steuern.

Während das dritte Kästchen stetig nach rechts gleitet, bewegen sich die ersten beiden jeweils um zwei Schritte, bis sie alle das Ende des Bildschirms erreichen (wobei das zweite Kästchen vor dem ersten Kästchen beginnt).

Wenn Sie die öffnen Animationen Klicken Sie auf die Registerkarte „DevTools“ und aktualisieren Sie die Seite. Dort finden Sie alle Informationen zu diesen Animationen:

Es gibt mehrere Elemente, die alle im gleichen Zeitraum belebt sind. In diesem Szenario werden die Hintergrundfarbe und die Boxposition für alle drei Boxen gleichzeitig animiert.

Zu beachten sind außerdem die Knoten in jeder Animationszeile. Wenn eine Animation unendlich oft auftritt, zeigen die Knoten an, wo jede Wiederholung in der Animation beginnt und endet.

Die leeren Knoten sind im Wesentlichen die Schlüsselbilder in Ihrer Animation, während die durchgezogenen, farbigen Knoten den Anfang und das Ende der Animation darstellen. Jedes Mal, wenn Ihre Animation von vorne beginnt, werden die Knoten dunkel gefärbt.

Schließlich können Sie die Animationen mit den DevTools bearbeiten, genau wie mit jeder CSS-Eigenschaft. Alle Änderungen, die Sie über die Animations-Benutzeroberfläche vornehmen, werden in den Inline-Stilen unter angezeigt Stile Tab und umgekehrt. So können Sie Änderungen vornehmen, testen und in Ihr eigentliches Projekt übernehmen.

Die DevTools-Funktion von Google Chrome ist ein großartiges Tool zum Debuggen Ihres CSS, einschließlich Animationen. Es bietet eine detaillierte Ansicht aller Übergänge und Animationen auf Ihrer Seite, sodass Sie bei jedem Schritt genau sehen können, was passiert.

Als Webentwickler sollten Sie mit der DevTools-Funktion Ihres Browsers oder einer gleichwertigen Funktion vertraut sein.