Home-theater-designers
CSS gibt Entwicklern die Möglichkeit, ihre Webseiten mithilfe von Keyframe-Animationen zum Leben zu erwecken.
CSS-Animation wird erreicht, indem der Anfangszustand eines HTML-Elements durch seine verschiedenen Eigenschaften verändert wird. Einige allgemeine CSS-Eigenschaften, die animiert werden können, sind:
So erhalten Sie mehr Google-Meinungsbelohnungen
- Breite
- Höhe
- Position
- Farbe
- Opazität
Diese allgemeinen CSS-Eigenschaften werden von bestimmten CSS-Elementen manipuliert, um das gewünschte Ergebnis zu erzielen. Wenn Sie jemals auf einer Webseite auf ein animiertes Element gestoßen sind, besteht die Möglichkeit, dass das Element mithilfe einer Keyframe-Animation animiert wurde.
Was ist ein Keyframe-Element?
Die 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 Aussehen, das dieses Element zu diesem Zeitpunkt haben muss.
Das mag nach viel zu verdauen klingen, ist aber eigentlich ganz einfach. Die Keyframes-Element hat eine ziemlich einfache Struktur, die leicht verstanden und an alle Animationsanforderungen angepasst werden kann.
Beispiel für eine Keyframe-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 von Abschnitt oben müssen Sie alle erforderlichen Formatierungen platzieren, damit das Element wie eine grüne rechteckige Schaltfläche aussieht, und dann im zu Abschnitt werden Sie alle Styling-Anforderungen eingeben, um diese Schaltfläche in eine blaue runde Schaltfläche zu verwandeln.
Wenn Sie denken, das klingt nicht sehr nach Animation. Nun, das liegt daran, dass eine Schlüsselkomponente dieses gesamten Prozesses noch eingeführt werden muss – diese Komponente ist die Animationseigenschaft.
Die Animationseigenschaft
Die Animationseigenschaft hat eine Reihe von verschiedenen Untereigenschaften; Diese werden in Kombination mit der obigen Keyframe-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 in Ihren Projekten eine Animation zu erzielen. Diese Eigenschaften sind bekannt als:
- Animationsname
- Animationsdauer
- Animation-Timing-Funktion
- Animationsverzögerung
- Animation-Iteration-Anzahl
Verwenden von Animationen auf einer Webseite
Mit dem obigen Szenario besteht das Ziel darin, eine animierte Schaltfläche zu erstellen.
Beispiel für eine Schaltflächenanimation
Animation
/* 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;
}
}
Click!
Der Animationsabschnitt des obigen Codes enthält die fünf zuvor erwähnten Untereigenschaften. Jede Eigenschaft hat eine sehr unterschiedliche Funktion und zusammen arbeiten sie daran, jedes HTML-Element zu animieren, für das sie bestimmt sind.
Zugehörig: So zielen Sie mit CSS-Selektoren auf einen Teil einer Webseite ab
Die Eigenschaft Animation-name
Diese Eigenschaft ist die wichtigste Eigenschaft auf der Liste. Ohne das Animationsname-Eigenschaft , Sie hätten keine Kennung, die Sie an die weitergeben könnten Keyframes-Element , wodurch der gesamte Code innerhalb seiner Parameter nutzlos wird.
Wenn Sie vergessen haben, eine oder zwei der anderen Untereigenschaften hinzuzufügen, haben Sie möglicherweise immer noch eine ziemlich anständige Animation. Wenn Sie jedoch die vergessen haben Animationsname-Eigenschaft Sie hätten keine Animation.
Die Eigenschaft der Animationsdauer
Diese Eigenschaft wird verwendet, um die Zeitdauer zu definieren, die ein animiertes Element beim Übergang von einem Zustand zum nächsten benötigen soll.
Im obigen Beispiel ist die Animationsdauer-Eigenschaft ist auf 5 Sekunden (5s) eingestellt, so dass die grüne rechteckige Taste insgesamt 5 Sekunden hat, bevor sie vollständig zu einer blauen runden Taste wird.
Die Eigenschaft Animation-delay
Diese Eigenschaft ist aus einem Grund wichtig; Einige Webseiten können einige Sekunden dauern, bis sie vollständig geladen sind (aufgrund verschiedener Faktoren). Also die Animationsverzögerungseigenschaft verhindert, dass die Animation sofort startet, falls das Laden der Webseite etwas länger dauert.
Im obigen Beispiel ist die Animationsverzögerungseigenschaft auf 4s gesetzt, was bedeutet, dass die Animation erst 4 Sekunden nach dem Besuch der Webseite beginnt (damit 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 Animation-Iteration-Count-Eigenschaft nimmt Werte an, die Wörter und Zahlen sind. Der Zahlenwert kann alles von 1 aufwärts sein, während der Wortwert normalerweise ist unendlich .
Im obigen Beispiel ist die Animation-Iteration-Count-Wert ist eingestellt auf unendlich , was bedeutet, dass die Schaltflächeneigenschaft, solange die Webseite aktiv ist, kontinuierlich von einem Zustand zum nächsten animiert wird.
Die Eigenschaft der Animation-Timing-Funktion
Diese Eigenschaft bestimmt die Bewegung des animierten Elements beim Übergang von einem Zustand zum nächsten. Die Animation-Timing-Funktionseigenschaft wird normalerweise einer von drei Beschleunigungswerten zugewiesen.
- Einfach einsteigen
- Ease-out
- Einfach-in-out
Die 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, wenn sich die Schaltfläche von einem grünen Rechteck in einen blauen Kreis verwandelt, verwenden Sie die Easy-in-Wert . Wenn Sie nur den langsamen Übergang in die entgegengesetzte Richtung wünschen, würden Sie die Ausfahrwert .
Reduzierung unseres Kodex
In den meisten Fällen wird die Reduzierung der Programmdauer 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 durch einfaches Verwenden der Animationseigenschaft erreicht werden, ohne jede ihrer Untereigenschaften explizit zu identifizieren.
Reduzieren des Codes für das Beispiel für die Schaltflächenanimation
Animation
/* 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;
}
}