@keyframes-Animationen
Definieren Sie mehrstufige Animationen mit @keyframes, binden Sie sie mit der Kurzschreibweise animation ein und steuern Sie Wiederholungen, Richtung und fill-mode.
@keyframes-Animationen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Transitions und Animationen
Transitions animieren den Wechsel zwischen zwei Zuständen, der durch eine Änderung ausgelöst wird. @keyframes-Animationen laufen automatisch ab, können sich wiederholen, rückwärts laufen, unendlich oft abgespielt werden und mehrere Zwischenzustände definieren – ein Auslöser ist nicht erforderlich.
@keyframes definieren
Definieren Sie mit @keyframes eine Animationsabfolge. Legen Sie Zustände bei Prozentwerten (0 %, 50 %, 100 %) fest oder verwenden Sie die Schlüsselwörter from und to.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}Die Kurzschreibweise animation
animation: name duration timing-function delay iteration-count direction fill-mode. Wenden Sie die Animation mit dieser Kurzschreibweise auf ein Element an.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}animation-iteration-count
Legt fest, wie oft die Animation abgespielt wird. infinite wiederholt sie unendlich oft. Eine Zahl gibt an, wie oft sie genau abgespielt wird.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}animation-direction
normal (Standard): jedes Mal vorwärts. reverse: rückwärts. alternate: vorwärts und anschließend rückwärts. alternate-reverse. alternate eignet sich hervorragend für Pingpong-Effekte.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}animation-fill-mode
Steuert den Zustand des Elements vor und nach der Animation. forwards: Das Element bleibt im Zustand des letzten Keyframes. backwards: Der from-Zustand wird während der Verzögerung angewendet. both: beides.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}animation-play-state
Pausieren und setzen Sie Animationen mit JavaScript fort, indem Sie zwischen animation-play-state: paused | running wechseln.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Mehrere Animationen
Wenden Sie mehrere Animationen auf ein Element an, indem Sie sie durch Kommas trennen. Jede Animation läuft unabhängig von den anderen.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Zeitversetzte Animationen mit animation-delay
Versetzen Sie Listenelemente zeitlich, indem Sie die Verzögerung für jedes Element erhöhen. Mit CSS-benutzerdefinierten Eigenschaften lässt sich das einfach über JavaScript umsetzen.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — Hinweis an den Browser
will-change: transform weist den Browser darauf hin, dass die Eigenschaft animiert wird. Dadurch kann er das Element bereits im Voraus in eine eigene Compositor-Ebene verschieben. Verwenden Sie dies sparsam – zu viele Compositor-Ebenen verbrauchen unnötig GPU-Speicher.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Praxis: Skeleton-Ladebildschirm
Skeleton-Bildschirme zeigen mit einer Schimmer-Animation an, dass Inhalte geladen werden. Ein Farbverlauf bewegt sich über Platzhalterformen.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Kurzer Test
Welcher Wert von animation-fill-mode sorgt dafür, dass das Element nach dem Ende der Animation im Zustand des letzten Keyframes bleibt?
Zusammenfassung: @keyframes-Animationen
Definieren Sie sie mit @keyframes über from/to oder Prozentwerte. Wenden Sie sie mit der Kurzschreibweise animation an. Verwenden Sie iteration-count für Wiederholungen. Die Richtung alternate erzeugt einen Pingpong-Effekt. Mit fill-mode: forwards bleibt der letzte Zustand erhalten. Erzeugen Sie mit animation-delay und CSS-Variablen zeitliche Versätze. Verwenden Sie Keyframes für transform und opacity, um flüssige Animationen mit Compositing zu ermöglichen.
Häufig gestellte Fragen
Ist die Lektion „@keyframes-Animationen“ kostenlos?
Ja — der vollständige Text von „@keyframes-Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „@keyframes-Animationen“?
Definieren Sie mehrstufige Animationen mit @keyframes, binden Sie sie mit der Kurzschreibweise animation ein und steuern Sie Wiederholungen, Richtung und fill-mode. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „@keyframes-Animationen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- CSS Custom Properties: deklarieren und aktualisieren
- Transitions: Eigenschaft, Dauer, Timing
- @keyframes-Animationen
- prefers-reduced-motion berücksichtigen