Erwecken Sie Ihre Webseiten mit CSS-Animationen und -Übergängen zum Leben

Last updated 13. August 2023

Website-Designs entwickeln sich ständig weiter. Von ansprechendem Design, schöner Typografie, perfekten Farbcodierungsschemata und Illustrationen – die Website-Ersteller entwickeln jeden Tag neue Ideen und Designs.

Heutzutage haben Benutzer hohe Erwartungen an die Benutzerschnittstellen aufgrund solch hochwertiger Inhalte, die über das Internet verfügbar sind. Mit der Entwicklung der Website-Schnittstellen entwickelt sich auch die Technologie dahinter. Eine Hauptkomponente, die für die Verbesserung der Website-Oberfläche verantwortlich ist, ist CSS.

CSS oder Cascading Style Sheets sind dafür verantwortlich, Websites sehr interaktiv zu machen, indem sie ihren Stil, ihr Layout und ihre Designs definieren. CSS3, der neueste Standard für CSS, hat das Konzept von Animationen und Transformationen eingeführt, die das Benutzererlebnis verbessern, indem sie der Benutzeroberfläche zusätzliche Tiefe verleihen. Mit CSS-Animationen und -Übergängen können Sie Geschichten erzählen, aufwendige Effekte erzeugen und die Benutzerinteraktion mit Ihrer Website sehr effektiv und sinnvoll gestalten.

Eine Animation ist nur eine Bewegungssimulation, die dadurch entsteht, dass eine Reihe von Objekten wie Bilder nacheinander angezeigt werden. Der Übergang hingegen ist im Grunde ein Prozess, bei dem ein Objekt von einem Zustand in einen anderen wechselt. Aber wenn wir über Webanimationen sprechen, gibt es im Wesentlichen drei Arten – CSS-Animationen oder Keyframe-Animationen, CSS-Übergänge und JavaScript-Animationen.

CSS-Animationen

Um Animationen in CSS zu erstellen, müssen wir die CSS-Eigenschaften eines Elements wie eines Bildes oder Textes für einen bestimmten Zeitraum ändern. Wir können die Eigenschaften von Elementen beliebig oft ändern und auch die Dauer der Animation festlegen.

Содержание показать

Festlegen von @keyframes

CSS-Animationen werden bitweise mit Keyframes definiert. Diese Keyframes sind die Zwischenpunkte der Animation. Alle CSS-Animationen werden unter der @keyframes-Regel angegeben. Diese Keyframes geben an, was mit dem Element zu einem bestimmten Zeitpunkt passiert, d. h.

welche Eigenschaften sich ändern
wenn das Element animiert wird
wie das Element animiert wird

Sie können Ihren eigenen Keyframe definieren als:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Hier geben ‚to‘ und ‚from‘ den Beginn und das Ende der Animation an. Wir können auch Animationen für zwischenzeitliche Momente zwischen Start und Ende wie folgt spezifizieren:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Hier steht 0 % für den Beginn der Animation, 100 % für das Ende der Animation und 50 % für die Änderung zwischen Start und Ende. Aber wie teilen wir dem Browser mit, wie lange die Animation stattfinden soll? Wir tun dies mit Hilfe bestimmter Animationseigenschaften. Diese Animationseigenschaften werden dem zu animierenden Element zugeordnet. Zum Beispiel:

element_name
{
animation_property: value;
style_property: value;
}

Hier kann das Element ein beliebiges HTML-Tag wie div, span, img, p usw. sein und style_propertyist eine beliebige CSS-Stileigenschaft wie background_color, width, height usw. Lassen Sie uns nun einige Animationseigenschaften im Detail betrachten.

@keyframes: Keyframes werden verwendet, um den Animationscode wie oben beschrieben anzugeben.
animation-name: Der mit @keyframes angegebene Name ist der Name der Animation. Über diesen Namen werden die Keyframes mit dem zu animierenden Element referenziert.
animation-duration: Wird verwendet, um die Dauer der Animation in Sekunden oder Millisekunden anzugeben. Wenn wir es beispielsweise auf 5 Sekunden einstellen, läuft die Animation nur 5 Sekunden lang. Wenn wir diese Eigenschaft nicht festlegen, wird die Animation überhaupt nicht ausgeführt, da ihr Standardwert 0 ist.
animation-delay: Wir können den Start der Animation verzögern, indem wir die Animationsverzögerungszeit angeben. Wenn Sie die Animation beispielsweise 5 Sekunden nach dem Laden der Seite im Browser starten möchten, stellen Sie die Animationsverzögerung einfach auf 5 Sekunden ein.
animation-direction: Mit dieser Eigenschaft können wir dem Browser mitteilen, ob sich eine Animation in die umgekehrte Richtung bewegt oder abwechselnd Zyklen durchläuft. Wenn Sie beispielsweise möchten, dass die Animation von Anfang bis Ende abläuft, stellen Sie den Wert der Animationsdauer auf „normal“. Wenn Sie möchten, dass es von Ende zu Anfang läuft, setzen Sie den Wert einfach auf „umgekehrt“.
animation-fill-mode: Wir können den Stil des Elements angeben, wenn die Animation nicht mit diesem Modus abgespielt wird, dh wenn die Animation verzögert oder beendet ist, wie sollte der Stil des Elements sein.
animation-iteration-count: Wie oft eine Animation abgespielt werden kann, wird durch diese Eigenschaft dargestellt. Wenn Sie beispielsweise die Animation einmal abspielen möchten, setzen Sie sie auf 1, oder wenn Sie möchten, dass die Animation für immer abgespielt wird, stellen Sie sie einfach auf „unendlich“.
animation-timing-function: Diese Eigenschaft wird verwendet, um die Geschwindigkeitskurve der Animation wie linear, Beschleunigung oder Entschleunigung anzugeben.
Animation: Dies ist die abgekürzte Eigenschaft zum Einstellen aller Animationseigenschaften.

Beispielsweise können Sie ein hüpfendes Objekt mit dem folgenden Code-Snippet animieren. Beachten Sie, wie hier die Kurzschreibweise für Animationen verwendet wurde.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Übergänge

CSS-Übergänge werden auf Eigenschaften von Elementen für eine bestimmte Zeitdauer angewendet, basierend auf bestimmten Timing-Funktionen, auch bekannt als Easing-Funktionen. Mit Timing-Funktion meinen wir eine Funktion, die die Eigenschaften der Elemente von einem Zustand in einen anderen ändert, wie z. B. lineare Progression, Beschleunigung oder Entschleunigung. Sie haben vielleicht bemerkt, dass ein Bild gleitet oder sich in ein anderes Bild verwandelt, wenn Sie mit der Maus darüber fahren, oder ein Ton abgespielt wird, wenn Sie mit der Maus klicken. All dies sind Übergangseffekte, die eine Website interaktiv machen können.

Easing-Funktionen sind wichtig für die Erstellung von Übergängen. Sie geben an, wie sich die Eigenschaften ändern. Sie können auch die Rate ändern, mit der sich der Wert von Eigenschaften vom Startpunkt bis zum Endpunkt eines Übergangs ändert. Sie können Übergänge auf folgende Weise anwenden:

element
{
style_property: value;
transition_property: value;
}

Hier gibt element das HTML-Element an, das Sie transformieren möchten, z. B. div, H1, img usw. style_property ist das CSS-Styling, das auf dieses Element angewendet wird. Betrachten wir nun einige Übergangseigenschaften :

transit-property: Der Übergangseffekt wird immer auf die CSS-Eigenschaft eines Elements wie Breite, Höhe, Farbe oder Form angewendet. Der Wert dieses Attributs gibt die CSS-Eigenschaft des Elements an. Der Übergangseffekt startet immer dann, wenn sich diese Eigenschaft ändert, z. B. beim Bewegen der Maus oder beim Klicken.
transit-timing-function: Dies ist die Ease-Funktion, die auf das Element angewendet werden soll. Diese Eigenschaft wird verwendet, um die Geschwindigkeitskurve des Übergangs anzugeben, z. B. Einfahren, Ausfahren, linear usw.
Übergangsdauer: Es ist genau wie die Eigenschaft der Animationsdauer. Es wird verwendet, um die Zeitdauer des Übergangseffekts in Sekunden oder Millisekunden anzugeben. Wenn wir es beispielsweise auf 5 Sekunden einstellen, wird der Übergang in 5 Sekunden abgeschlossen. Wenn wir diese Eigenschaft nicht festlegen, gibt es überhaupt keinen Übergang, da der Standardwert 0 ist.
transit-delay: Mit dieser Eigenschaft können wir die Zeitdauer angeben, um den Übergangseffekt zu verzögern. Wenn Sie den Effekt beispielsweise 5 Sekunden nach dem Mauszeiger starten möchten, stellen Sie die Übergangsverzögerung einfach auf 5 Sekunden ein.
Übergang: Dies ist die Kurzformeigenschaft zum gemeinsamen Einstellen aller oben genannten Übergangseigenschaften.

Beispielsweise ändert der folgende Code die Breite des div-Elements beim Mauszeiger. Sehen Sie sich die Übergangs-Kurzschrifteigenschaft an, die hier angewendet wird.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animationen vs. Übergänge

Ähnlichkeiten zwischen Animationen und Übergängen

Sowohl Übergang als auch Animation werden verwendet, um Änderungen in den Eigenschaften eines Elements zu visualisieren.
Wir können die Dauer angeben, wie lange der Übergang und die Animation stattfinden sollen.
Wir haben bestimmte Timing-Funktionen, um die Geschwindigkeit des Wechsels von einem Wert zum anderen für Übergänge sowie Animationen zu ändern.

Unterschiede zwischen Animationen und Übergängen

CSS-Übergänge sind reaktiv. Sie müssen von den Benutzern ausgelöst werden. Animationen hingegen werden immer dann ausgeführt, wenn die Seite im Browser geladen wird. Sie müssen nicht ausgelöst werden.
Übergänge werden einmal ausgeführt und stoppen dann. Dann müssen wir sie immer wieder auslösen, während sich Animationen wiederholen können. Sie können an ihrer eigenen Haltestelle starten und dann erneut starten.
Der Browser kümmert sich selbst um die Übergänge. Wir müssen nur den Beginn und das Ende des Übergangs angeben. Wir können den Übergangseffekt einstellen, aber wir können die Änderungsrate eines Übergangs nicht ändern. Wenn zum Beispiel ein Bild beim Bewegen der Maus gleitet, sehen wir nur, wie es ein- oder ausgeblendet wird, wenn wir darüber schweben.
Animationen hingegen bieten die Flexibilität, die Eigenschaften zwischen Start und Ende zu ändern. Dies geschieht mit Hilfe von Keyframes. Beispielsweise können wir die Farbe eines Bildes für die ersten 5 Sekunden auf Rot setzen, dann für die nächsten 5 Sekunden auf Blau, dann für die nächsten 5 Sekunden auf Grün und für die letzten 5 Sekunden der Animation auf Gelb. Daher haben wir die Kontrolle über Animationen.

Anbieter-Präfixe

Nicht alle CSS3-Funktionen werden von jedem Browser unterstützt. Daher verwenden wir Präfixe entlang dieser CSS-Eigenschaften für bestimmte Browser wie -webkit- (Safari), -moz- (Firefox) oder -o- (Opera). Dadurch können die Browser-Marker eine Unterstützung für diese CSS3-Funktion hinzufügen. Diese Präfixe werden als Herstellerpräfixe oder CSS-Browserpräfixe bezeichnet. Daher müssen wir neben den Animations- und Übergangseigenschaften auch Herstellerpräfixe einfügen. Betrachten Sie beispielsweise den folgenden Code und sehen Sie, wie die Herstellerpräfixe für Safari verwendet wurden:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Tipp! Sie können diese Hektik vermeiden, indem Sie Bibliotheken wie -prefix-free verwenden. Es ist eine JavaScript-Bibliothek, die jedem CSS-Code das Präfix des aktuellen Browsers hinzufügt. Sehen Sie sich viele solcher Bibliotheken an, die im Internet verfügbar sind.

Fazit

Website-Entwickler können Animationen und Transformationen anwenden, um Benutzer auf Ihre Websites zu locken. Sie können sie verwenden, um Formulare, Benachrichtigungen, Hintergrundgrafiken, Bilder, Diagramme, Kritzeleien, Call-to-Action-Schaltflächen und vieles mehr zu verbessern. Verwenden Sie einfach Ihre Vorstellungskraft und Sie werden einen Weg finden, Ihre Benutzer zu überraschen. Denken Sie daran, dass selbst eine kleine Änderung Ihrer Website sie viel besser aussehen und ihren Wert steigern kann. Haben Sie also schon Animationen über Ihrer Website verwendet? Teilen Sie Ihre Gedanken zur Verwendung von Animationen und Übergängen mit.

Aufnahmequelle: instantshift.com