So erstellen Sie CSS-Keyframe-Animationen
Mit CSS können Entwickler ihre Webseiten mithilfe von Keyframes-Animationen zum Leben erwecken.
CSS-Animation wird erreicht, indem der Anfangszustand eines HTML-Elements durch seine verschiedenen Eigenschaften geändert wird. Einige allgemeine CSS-Eigenschaften, die animiert werden können, umfassen:
- Breite
- Höhe
- Position
- Farbe
- Opazität
Diese allgemeinen CSS-Eigenschaften werden von bestimmten CSS-Elementen bearbeitet, um das gewünschte Ergebnis zu erzielen. Wenn Sie jemals auf ein animiertes Element auf einer Webseite gestoßen sind, wurde das Element wahrscheinlich mithilfe von Keyframes-Animationen animiert.
Was ist ein Keyframes-Element?
Das Keyframes-Element kann für ein oder mehrere HTML-Elemente verwendet werden, auf die es Zugriff hat. Es identifiziert einen bestimmten Punkt im Zustand eines Elements und bestimmt das Erscheinungsbild, das dieses Element zu diesem Zeitpunkt haben muss.
Das klingt vielleicht nach viel zu verdauen, ist aber eigentlich ganz einfach. Das Keyframes-Element hat eine ziemlich einfache Struktur, die leicht verstanden und an alle Animationsanforderungen angepasst werden kann.
Beispiel für eine Keyframes-Struktur
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Angenommen, Sie möchten eine grüne rechteckige Schaltfläche animieren, indem Sie sie in eine blaue runde Schaltfläche verwandeln.
Innerhalb der Parameter der aus dem Abschnitt über Sie müssen alle das Styling notwendig zu platzieren , um das Element zu haben wie eine grüne rechteckige Schaltfläche suchen, dann in den Abschnitt, werden Sie alle Styling – Anforderungen stellen auf diese Schaltfläche in eine blaue runde Taste verwandeln .
Wenn Sie denken, "das klingt nicht zu sehr nach Animation". Das liegt daran, dass eine Schlüsselkomponente dieses gesamten Prozesses noch eingeführt werden muss – diese Komponente ist die Animationseigenschaft.
Die Animationseigenschaft
Die Animationseigenschaft verfügt über eine Reihe verschiedener Untereigenschaften. Diese werden in Kombination mit der obigen Keyframes-Struktur verwendet, um das gewünschte HTML-Element zu animieren.
Sie müssen jedoch nur fünf dieser Untereigenschaften und die damit verbundenen Werte kennen, um eine Animation in Ihren Projekten zu erzielen. Diese Eigenschaften sind bekannt als:
- Animationsname
- Animationsdauer
- Animation-Timing-Funktion
- Animationsverzögerung
- Anzahl der Animationsiterationen
Verwenden der Animation auf einer Webseite
In dem obigen Szenario besteht das Ziel darin, eine animierte Schaltfläche zu erstellen.
Beispiel für eine Schaltflächenanimation
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>
Der Animationsabschnitt des obigen Codes enthält die fünf zuvor erwähnten Untereigenschaften. Jede Eigenschaft hat eine sehr unterschiedliche Funktion und zusammen animieren sie jedes HTML-Element, auf das sie abzielen.
Die Animation-Name-Eigenschaft
Diese Eigenschaft ist die wichtigste Eigenschaft in der Liste. Ohne die Eigenschaft animation-name hätten Sie keine Kennung, die an das Keyframes-Element eingefügt werden könnte , wodurch der gesamte Code innerhalb seiner Parameter unbrauchbar würde.
Wenn Sie vergessen haben, eine oder zwei der anderen Untereigenschaften einzuschließen, haben Sie möglicherweise immer noch eine recht anständige Animation. Wenn Sie jedoch die Eigenschaft "Animationsname" vergessen haben, haben Sie keine Animation.
Die Animation-Dauer-Eigenschaft
Diese Eigenschaft wird verwendet, um die Zeit zu definieren, die ein animiertes Element beim Übergang von einem Zustand zum nächsten benötigen soll.
Im obigen Beispiel ist die Eigenschaft für die Animationsdauer auf 5 Sekunden (5 Sekunden) festgelegt, sodass die grüne rechteckige Schaltfläche insgesamt 5 Sekunden hat, bevor sie vollständig zu einer blauen runden Schaltfläche wird.
Die Animation-Verzögerungseigenschaft
Diese Eigenschaft ist aus einem Grund wichtig; Das vollständige Laden einiger Webseiten kann einige Sekunden dauern (aufgrund verschiedener Faktoren). Die Animation-Verzögerungseigenschaft verhindert daher, dass die Animation sofort gestartet wird, falls das Laden der Webseite einige Zeit in Anspruch nimmt.
Im obigen Beispiel ist die Eigenschaft "Animationsverzögerung" auf 4s festgelegt. Dies bedeutet, dass die Animation erst 4 Sekunden nach dem Besuch der Webseite beginnt (so dass die Webseite genügend Zeit zum Laden hat, bevor die Animation beginnt).
Die Animation-iteration-count-Eigenschaft
Diese Eigenschaft gibt an, wie oft das animierte Element von einem Zustand in den nächsten übergehen soll. Die Eigenschaft animation-iteration-count akzeptiert Werte, die Wörter und Zahlen sind. Der Zahlenwert kann von 1 aufwärts sein, während der Wortwert normalerweise " unendlich " ist.
Im obigen Beispiel wird der Wert für die Anzahl der Animationsiterationen auf " unendlich " gesetzt. Dies bedeutet, dass die Schaltflächeseigenschaft kontinuierlich von einem Status zum nächsten animiert wird, solange die Webseite aktiv ist.
Die Animation-Timing-Funktionseigenschaft
Diese Eigenschaft bestimmt die Bewegung des animierten Elements beim Übergang von einem Zustand zum nächsten. Der Eigenschaft Animation-Timing-Funktion wird normalerweise einer von drei Easy-Werten zugewiesen.
- Einfaches Einsteigen
- Leichtigkeit
- Einfaches Ein- und Aussteigen
Der Easy-In-Out-Wert wird oben verwendet. Dadurch wird die Animation langsam von einem Zustand in den anderen überführt. Wenn das Ziel darin besteht, einen langsamen Übergang zu erstellen, während sich die Schaltfläche von einem grünen Rechteck in einen blauen Kreis verwandelt, verwenden Sie den Easy-In-Wert . Wenn Sie nur den langsamen Übergang in die entgegengesetzte Richtung wünschen, würden Sie den Easy-Out-Wert verwenden .
Reduzierung unseres Codes
In den meisten Fällen wird die Reduzierung der Länge eines Programms als praktischer Ansatz angesehen. Dies liegt hauptsächlich daran, dass weniger Codezeilen die Wahrscheinlichkeit verringern, dass Fehler in Ihren Programmen unbemerkt bleiben.
Der obige Code kann um vier Zeilen reduziert werden. Dies kann erreicht werden, indem einfach die Animationseigenschaft verwendet wird, ohne jede ihrer Untereigenschaften explizit zu identifizieren.
Reduzieren des Codes für das Beispiel der Schaltflächenanimation
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>
Im obigen Code wird eine Codezeile verwendet, um das gleiche Ergebnis zu erzielen, das zuvor fünf Codezeilen benötigt hat – auf diese Weise erstellen Sie saubereren Code .
Jetzt können Sie Ihre Webseiten animieren
Sie verfügen jetzt über die erforderlichen Fähigkeiten, um ein HTML-Element auf einer Webseite zu animieren. Sie sollten auch wissen, wie die Animationseigenschaft und das Keyframes-Element zusammenarbeiten, um eine CSS-Animation zu ermöglichen.
Die Animationseigenschaft mit ihrer Liste umfangreicher Untereigenschaften ist zweifellos interessant. Dennoch gibt es ein breites Spektrum anderer CSS-Eigenschaften, die Sie möglicherweise nützlich finden.
Bildnachweis : Josh Riemer / Unsplash