CSS ist eine der leistungsstärksten Möglichkeiten, die Webseite interaktiv zu gestalten. Es verändert das Erscheinungsbild unserer Basis Website. Eine der wichtigen und aufregenden Funktionen von CSS ist, dass wir damit Animationen ausführen können. Es ermöglicht uns, die Elemente innerhalb unserer Seite zu verschieben. Beginnen wir unsere Reise der Animationen in CSS in der folgenden Reihenfolge:
Animationen in CSS
Das Hinzufügen von Animationen zu unserer Website ist eine großartige Möglichkeit, die Aufmerksamkeit der Benutzer auf sich zu ziehen. Dies erhöht nicht nur den Wert unserer Seite, sondern bereichert auch die Benutzererfahrung. Die Animation in CSS besteht aus zwei Teilen. Sie sind
- Keyframes
- Animation
Die CSS-Animationen werden in allen Browsern unterstützt. Einige ältere Browser wie Safari (bis Version 8.0) benötigen jedoch ein Präfix (-webkit-), um die Animationseigenschaften zu interpretieren. Beispielsweise:
.anim {Höhe: 200px Breite: 200px Hintergrund: Hellblau Position: relativer Rahmenradius: 100% -Webkit-Animationsname: cssanim / * alte Browser * / -webkit-Animationsdauer: 5s / * alte Browser * / Animation -name: cssanim Animationsdauer: 5s} / * alte Browser * / @ -webkit-keyframes cssanim {0% {links: 0px} 100% {links: 300px}} @keyframes cssanim {0% {links: 0px} 100 % {left: 300px}}Wir können die Beispiel-HTML-Seite von oben verwenden und den CSS-Code im Style-Tag ersetzen, um weitere Beispiele auszuprobieren.
Keyframes in CSS
Dies ist der Baustein für Animationen in CSS. Es wurde verwendet, um bestimmte Momente und Stile der Animation auf unserer Webseite zu definieren. Mit anderen Worten, wenn wir die @ keyframes in unserem CSS angeben, erhält es das Steuerelement, um den aktuellen Status in einen neuen Status zu ändern oder die Objekte für eine bestimmte Dauer zu animieren.
Die @keyframes müssen über bestimmte Eigenschaften verfügen, um die Animation zu steuern, z. B. den Namen der Animation, die Stufen und Eigenschaften.
Name - Für jede Animation muss ein Name angegeben werden, um ihr Verhalten zu beschreiben.
Stufen - Die Bühne repräsentiert die Fertigstellung einer Animation. Dies kann entweder mit dem Schlüsselwort 'to' und 'from' oder als Prozentsatz erfolgen, während 0% den Anfangszustand und 100% den Endzustand einer Animation darstellt. Der Vorteil der Verwendung der prozentualen Darstellung besteht darin, dass wir mehrere Zwischenstufen dazwischen definieren können, d. H. Wie sollte sich die Animation bei 50% oder 75% usw. verhalten?
Eigenschaften - Diese Eigenschaften geben uns die Kontrolle über die @keyframes, um sie während der Animation zu bearbeiten.
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 5s} @keyframes cssanim {0% {Transformation: Skalierung (0,5) Deckkraft: 0} 50 % {Transformation: Skalierung (1,5) Deckkraft: 1} 100% {Transformation: Skalierung (1)}}Jetzt, da wir uns über die Definition von Keyframes im Klaren sind. Lassen Sie uns die Animationseigenschaften untersuchen, um zu beschreiben, wie unsere Elemente und Objekte animiert werden. Die beiden Eigenschaften, d. H. Erben und initial, können mit allen Animationstypen verwendet werden. Diese Eigenschaften werden im Allgemeinen zusammen mit dem div-Tag verwendet, um unterschiedliche Verhaltensweisen aufzuweisen.
Initiale: Setzt diese Eigenschaft auf den Standardwert.
erben: Erbt diese Eigenschaft von ihrem übergeordneten Element.
Animationseigenschaften
- Animationsname
Es gibt den Namen der Animation an, die in den @keyframes zum Bearbeiten verwendet wird.Die möglichen Werte sind:
- Name: Dies gibt den Namen an, der für die Animation an den Keyframe gebunden werden soll.
- keiner: Dies ist der Standardwert und kann zum Überschreiben der geerbten oder kaskadierenden Animationen verwendet werden.
Syntax:
Animationsname: Name | Keine | initial | erben
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 5s} @keyframes cssanim {0% {links: 0px} 100% {links: 300px} }}- Animationsdauer
Es gibt die Zeit an, die eine Animation benötigt, um eine Ausführung abzuschließen. Sie wird in Sekunden oder Millisekunden (z. B. 4 s oder 400 ms) definiert. Der Standardwert dieser Eigenschaft ist 0s. Wenn diese Eigenschaft nicht angegeben wird, findet die Animation nicht statt.
Syntax:
Was ist eine Instanz einer Klasse in Java
Animationsdauer: Zeit
.anim {Höhe: 200px Breite: 200px Hintergrund: blau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 4s} @keyframes cssanim {0% {Transformation: Skalierung (0,4) Deckkraft: 0} 50 % {Transformation: Skalierung (1.4) Deckkraft: 1} 100% {Transformation: Skalierung (1)}}- Animationsverzögerung
Mit der Animation-Verzögerungseigenschaft können Sie die Verzögerung in der Animation angeben. Es definiert, wann eine Animationssequenz mit der Ausführung beginnt.
Der Wert dieser Eigenschaft kann entweder in Sekunden (s) oder Millisekunden (ms) deklariert werden. Es kann sowohl positive als auch negative Werte enthalten. Ein positiver Wert zeigt an, dass die Animation nach Ablauf der angegebenen Zeit gestartet wird und bis dahin nicht animiert bleibt. Andererseits startet ein negativer Wert die Animation sofort an dem Punkt, als ob sie bereits für einen bestimmten Zeitraum ausgeführt worden wäre.
Syntax:
Animationsverzögerung: Zeit
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 4s Animationsverzögerung: 4s} @keyframes cssanim {0% {links: 0px} 100% {left: 250px}}- Animations-Iterations-Anzahl
Diese Eigenschaft gibt an, wie oft eine Animationssequenz abgespielt werden soll. Der Standardwert dieser Eigenschaft ist 1.Die möglichen Werte sind:
- Nummer - bezeichnet die Anzahl der Iterationen
- unendlich - gibt an, dass die Animation für immer wiederholt werden soll
Syntax:
Animations-Iterations-Anzahl: Nummer | unendlich
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 2s Animationsiterationszahl: 4} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- Animationsrichtung
Es definiert die Richtung der Animation. Die Richtung des Elements kann so eingestellt werden, dass es vorwärts, rückwärts oder in abwechselnden Zyklen spielt.Der Standardwert dieser Eigenschaft ist normal und wird bei jedem Zyklus zurückgesetzt.Die möglichen Werte sind:
normal - Dies ist das Standardverhalten und die Animation wird vorwärts abgespielt. Nach jedem Zyklus erreicht die Animation ihren Ausgangszustand und wird erneut vorwärts abgespielt
umkehren - Die Animation wird in Rückwärtsrichtung abgespielt. Nach jedem Zyklus erreicht die Animation ihren Endzustand und wird rückwärts abgespielt
wechseln - Die Richtung der Animation ist umgekehrt, d. H. Sie wird bei jedem Zyklus zuerst vorwärts und dann rückwärts abgespielt. Jeder ungerade Zyklus rendert eine Vorwärtsanimation und jeder gerade Zyklus macht eine Rückwärtsbewegung.
Alternate-Reverse - Die Richtung der Animation wird abwechselnd umgekehrt. Hier wird die Animation bei jedem Zyklus zuerst rückwärts und dann vorwärts abgespielt. Jeder ungerade Zyklus bewegt sich rückwärts oder rückwärts und jeder gerade Zyklus rendert eine Vorwärtsanimation.
Syntax:
Animationsrichtung: normal | umkehren |alternativ | Alternate-Reverse
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 2s Animationsiterationszahl: unendlich} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- Animations-Timing-Funktion
Diese Eigenschaft bestimmt die Geschwindigkeitskurve oder den Bewegungsstil der Animation. Es wird zugewiesen, um die Änderung des Animationsstils reibungslos von einem Formular zum anderen vorzunehmen. Wenn kein Wert zugewiesen ist, wird standardmäßig erleichtert.Die möglichen Werte für die Animations-Timing-Funktion sind:
Leichtigkeit - Dies ist der Standardwert der Eigenschaft. Hier beginnt die Animation langsam, wird in der Mitte allmählich schnell und endet dann wieder langsam.
linear - Die Animation behält während des gesamten Zyklus die gleiche Geschwindigkeit bei, d. H. Von Anfang bis Ende.
Easy-In - Die Animation beginnt langsam.
Sortiermethode c ++
Leichtigkeit - Die Animation endet langsam.
Easy-In-Out - Die Animation bewegt sich sowohl am Anfang als auch am Ende langsam.
kubischer Bezier (n, n, n, n) - Mit dieser erweiterten Funktion können wir eine benutzerdefinierte Timing-Funktion erstellen, indem wir unsere eigenen Werte definieren. Der mögliche Wert reicht von 0 bis 1.
Syntax:
Animations-Timing-Funktion: linear | Leichtigkeit Leichtigkeit | Easy-In | Easy-In-Out |kubischer Bezier (n, n, n, n)
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 2s Animationsrichtung: umgekehrt} @keyframes cssanim {0% {Hintergrund: orange links: 0px } 50% {Hintergrund: gelb links: 200px oben: 200px} 100% {Hintergrund: blau links: 100px}}- Animationsfüllmodus
Dies ist eine besondere Eigenschaft, da sie den Animationsstil vor oder nach der Wiedergabe der Animation bestimmt.Standardmäßig wird der Stil des Elements von der Animation vor oder nach dem Ende nicht beeinflusst. Diese Eigenschaft ist nützlich, da sie beim Überschreiben dieses Standardverhaltens der Animation hilft.Die folgenden Werte sind für die Eigenschaft 'Animationsfüllmodus' möglich:
keiner - Dies ist der Standardwert der Eigenschaft, d. H. Die Animationsstile werden vor oder nach der Animation nicht auf das Element angewendet.
vorwärts - Die Stile werden vom Element in der endgültigen Animationssequenz beibehalten, d. H. Nachdem die Animation beendet ist.
rückwärts - Die Stile werden vom Element in der anfänglichen Animationssequenz beibehalten, d. H. Bevor die Animation insbesondere während der Animationsverzögerung angestarrt wird.
beide - Dies bedeutet, dass die Animation sowohl in die Richtung, d. H. Vorwärts als auch rückwärts, folgt
Syntax:
Animationsfüllmodus: keine | vorwärts | rückwärts | beide
.anim {Breite: 50px Höhe: 50px Hintergrund: hellblau Farbe: weiß Schriftgröße: fett Position: relativer Animationsname: cssanim Animationsdauer: 5s Animationsiterationszahl: unendlicher Randradius: 100%} # anim1 { Animations-Timing-Funktion: Leichtigkeit} # anim2 {Animations-Timing-Funktion: linear} # anim3 {Animations-Timing-Funktion: Leichtigkeit} # anim4 {Animations-Timing-Funktion: Leichtigkeit} # anim5 {Animation- Timing-Funktion: Easy-In-Out} @keyframes cssanim {von {left: 0px} bis {left: 400px}}- Animations-Play-Status
Diese Eigenschaft gibt eine Animation an, die entweder abgespielt oder angehalten werden soll. Wenn eine Animation nach einer Pause fortgesetzt wird, beginnt sie an der Stelle, an der sie verlassen wurde.Die möglichen Werte sind:
- spielen - Um die Animation beim Laufen zu rendern
- hielt inne - Um die Animation im Pausenzustand zu rendern.
Syntax:
Animations-Wiedergabestatus: angehalten | spielen
.anim {Breite: 100px Höhe: 100px Hintergrund: hellblau Position: relativer Animationsname: cssanim Animationsdauer: 3s Animationsverzögerung: 2s Animationsfüllmodus: rückwärts Randradius: 100%} @keyframes cssanim {0% {oben: 0px Hintergrundfarbe: orange} 50% {oben: 0px Hintergrundfarbe: grün} 100% {oben: 100px Hintergrundfarbe: blau}}- Animation
Dies wird als Animationseigenschaftseigenschaft bezeichnet. Es wird für saubereren Code verwendet. Sobald wir uns mit allen Animationseigenschaften vertraut gemacht haben, wird empfohlen, die Animationskürzel zu verwenden, um schneller zu codieren und alle Eigenschaften in einer einzigen Zeile zu definieren.
Syntax:
Animation: [Animationsname] | [Animationsdauer] | [Animations-Timing-Funktion] |[Animationsverzögerung] | [Animation-Iterationszahl] | [Animationsrichtung] |[Animationsfüllmodus] | [Animationsspielzustand]
Alle Animationseffekte, die wir oben mit unterschiedlichen Animationseigenschaften zeigen, können mit der Kurzform erzielt werdenAnimation Eigentum.
.anim {Höhe: 200px Breite: 200px Hintergrund: hellblau Position: relativer Randradius: 100% Animationsname: cssanim Animationsdauer: 2s Animationsrichtung: normaler Animationsspielstatus: pausiert} @keyframes cssanim {0% {Hintergrund: orange oben: 0px} 50% {Hintergrund: gelb links: 200px oben: 200px} 100% {Hintergrund: blau links: 100px}}Damit sind alle Animationseigenschaften abgeschlossen, die in CSS verwendet werden können. Wir sollten verschiedene Variationen dieser Eigenschaften ausprobieren, um ein klareres Bild zu erhalten. Wenn wir es uns bequem machen, kann die Kurzform der Animation eine große Hilfe sein, um saubereren und schnelleren Code zu schreiben. Dies ist eine der wichtigsten Fähigkeiten, die Webentwickler in CSS erlernen müssen. Da wir uns eher auf sich bewegende als auf statische Objekte konzentrieren, können uns Animationen dabei helfen und auch bemerkenswerte Webseiten entwickeln.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs 'Animationen in CSS' und wir werden uns bei Ihnen melden.