CSS-Animationen: Webseiten zum Leben erwecken

Hallo da draußen, zukünftige Web-Zauberer! Heute tauchen wir in die magische Welt der CSS-Animationen ein. Bis zum Ende dieses Tutorials wirst du in der Lage sein, Elemente auf deinen Webseiten wie ein digitaler Fred Astaire tanzen zu lassen. Also, schnall dir deine virtuellen Tanzschuhe an und los geht's!

Was ist eine CSS-Animation?

CSS-Animationen sind wie das Leben einhauchen in die statischen Elemente deiner Webseite. Stell dir vor, du könntest einen Button pulsieren lassen, wenn ein Benutzer darüber fährt, oder ein Logo drehen, wenn die Seite lädt. Das ist die Macht der CSS-Animation! Sie ermöglicht es dir, CSS-Eigenschaftswerte über einen bestimmten Zeitraum zu ändern, wodurch Bewegung und visuelles Interesse ohne den Bedarf an komplexem JavaScript oder Flash entstehen.

Die @keyframes-Regel

Das Herz der CSS-Animationen ist die @keyframes-Regel. Hier definierst du die Stufen deiner Animation.

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

In diesem Beispiel haben wir eine Animation namens "bounce" erstellt. Bei 0% (dem Anfang) ist das Element in seiner ursprünglichen Position. Bei 50% (halbwegs durch die Animation) bewegt es sich um 20 Pixel nach oben. Bei 100% (dem Ende) kehrt es zu seiner ursprünglichen Position zurück.

Animation Delay-Eigenschaft

Manchmal möchtest du, dass deine Animation wartet, bevor sie startet. Hier kommt die animation-delay-Eigenschaft ins Spiel.

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

Dieser CSS-Code wird unsere "bounce"-Animation auf jedes Element mit der Klasse "delayed-bounce" anwenden. Die Animation dauert 1 Sekunde, aber sie beginnt erst 2 Sekunden nach dem Laden der Seite.

Animation Iterations Count

Standardmäßig laufen Animationen einmal und stoppen. Aber was ist, wenn du möchtest, dass deine Animation weiterläuft, wie der Energizer Bunny? Hier kommt animation-iteration-count ins Spiel.

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

Jetzt wird unser springendes Element für immer springen, oder zumindest bis der Benutzer die Seite schließt (was auch immer zuerst eintritt)!

Animation Direction-Eigenschaft

Manchmal möchtest du, dass deine Animation rückwärts läuft oder zwischen vorwärts und rückwärts wechselt. Die animation-direction-Eigenschaft lässt dich das tun.

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Dies wird unser Element kontinuierlich nach oben und unten springen lassen, wie eine perpetuelle Bewegungsmaschine (wenn wir nur diese für saubere Energie nutzen könnten!).

Animation Timing Function

Die animation-timing-function-Eigenschaft ermöglicht es dir, das Tempo deiner Animation zu kontrollieren. Es ist, als wärst du der Dirigent deines eigenen digitalen Orchesters!

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

Dies wird unsere Springanimation langsam starten lassen, in der Mitte beschleunigen und dann am Ende verlangsamen, was ihr ein natürlicheres, sprungähnliches Gefühl verleiht.

Animation Fill Modes

Die animation-fill-mode-Eigenschaft bestimmt, wie ein Element vor und nach der Animation aussehen sollte.

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

Mit forwards wird das Element die Stile aus der letzten Keyframe beibehalten, wenn die Animation endet, anstatt zu seiner ursprünglichen Position zurückzuspringen.

Animation Shorthand Property

Wenn du von all diesen Eigenschaften überwältigt bist, keine Sorge! CSS bietet eine Kurzform, um alle Animationseigenschaften auf einmal zu setzen:

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

Diese einzelne Zeile setzt den Namen der Animation, die Dauer, dieTiming-Funktion, die Verzögerung, die Wiederholungsanzahl, die Richtung und den Füllmodus. Es ist wie das Schweizer Taschenmesser der CSS-Animation!

Liste der CSS-Animationseigenschaften

Hier ist eine praktische Tabelle aller CSS-Animationseigenschaften, die wir behandelt haben:

Eigenschaft	Beschreibung
animation-name	Gibt den Namen der @keyframes-Animation an
animation-duration	Gibt an, wie lange die Animation dauern soll, um einen Zyklus abzuschließen
animation-timing-function	Gibt die Geschwindigkeitskurve der Animation an
animation-delay	Gibt eine Verzögerung für den Start der Animation an
animation-iteration-count	Gibt die Anzahl der Male an, die eine Animation abgespielt werden soll
animation-direction	Gibt an, ob die Animation in der anderen Richtung bei alternierenden Zyklen abgespielt werden soll
animation-fill-mode	Gibt an, welche Werte außerhalb der Ausführungszeit der Animation angewendet werden sollen
animation	Kurzformeigenschaft, um alle Animationseigenschaften auf einmal zu setzen

Und das war's, Leute! Du bist jetzt mit dem Wissen ausgestattet, deine Webseiten mit CSS-Animationen zum Leben zu erwecken. Denke daran, dass mit großer Macht große Verantwortung kommt - nutze diese Animationen weise, um das Benutzererlebnis zu verbessern, nicht zu stören.

Während du übst, wirst du feststellen, dass CSS-Animationen wie Kochen sind - es dauert Zeit, das Rezept genau richtig zu machen. Aber wenn du es schaffst, wirst du köstliche, animierte Web-Erfahrungen zaubern, die deine Benutzer zurückkehren lassen werden!

Nun, geht raus und animiert, meine digitalen Pixar-Azubis. Das Web ist deine Leinwand, und CSS ist deine Pinsel. Viel Spaß beim Animieren!

Credits: Image by storyset