Lädt...

CSS-Animationen

Übergänge zeigten A → B auf einen Trigger. Transforms zeigten, wohin die gezeichnete Box geht. Animationen schreiben eine Zeitleiste: Statuspunkt pulsieren, Loader endlos drehen, Karten nacheinander einblenden — mit @keyframes für die Schritte und animation zum Abspielen.

Was eine Animation ist

Zwei Teile: ein benanntes Keyframe-Set (@keyframes) mit Stilen bei Prozentwerten (oder from / to), und eine Regel, die diesen Namen mit Dauer, optionalem Delay, Iterationszahl, Richtung, Timing-Funktion und fill-mode abspielt. Der Browser interpoliert zwischen den Keyframe-Stopps.

Namensgleichheit ist strikt: animation-name: pulse läuft nur, wenn @keyframes pulse existiert. Benennen Sie nur eines um — nichts bewegt sich.

Steuerung auf einen Blick

📊 Kernstücke einer Animation

Baustein Rolle
@keyframes name { … } Zeitleiste von Eigenschaftswerten bei % / from / to
animation-name Welches Keyframe-Set abgespielt wird
animation-duration Dauer eines Zyklus (s oder ms)
animation-timing-function Easing innerhalb des Zyklus (ease, linear, …)
animation-delay Wartezeit vor dem ersten Zyklus
animation-iteration-count Anzahl der Zyklen (number oder infinite)
animation-direction normal, reverse, alternate, alternate-reverse
animation-fill-mode Stile davor/danach (none, forwards, backwards, both)
animation shorthand name → duration → timing → delay → iteration → direction → fill-mode (übliche Reihenfolge)

Selten brauchen Sie alle Longhands gleichzeitig. Starten Sie mit Name + Dauer; infinite für Loader, alternate für Hin-und-her, forwards, wenn der letzte Keyframe bleiben soll.

Erste Zeitleiste — ruhiger Puls

Opacity und transform sind paint-freundlich. Ein sanfter Puls ist ein klassisches erstes @keyframes-Übung.

Sanfter Status-Puls mit @keyframes

css 
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.92);
}
}

.status-dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #16a34a;
animation: pulse 1.4s ease-in-out infinite;
}

0% und 100% passen zusammen, damit die Schleife sauber schließt. infinite hält den Zyklus — gut für einen kleinen Statusindikator, laut wenn Sie einen ganzen Hero animieren.

Endlos drehen — Loader lieben linear

Rotation mit linear und infinite wirkt wie ein durchlaufender Spinner. Kombinieren Sie mit einem Reduced-Motion-Fallback, der die Drehung ausblendet oder einfriert.

Loader-Ring mit infinite rotate

css 
@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loader {
width: 2rem;
height: 2rem;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
border-top-color: #e5e7eb;
}
}

to ist Kurzform für 100%. Start bei Standard-0% (ohne transform) reicht, wenn nur das Ende der Drehung zählt.

Delay und Stagger — gleiche Keyframes, andere Starts

Ein Keyframe-Set kann viele Elemente antreiben. Stagger mit animation-delay, damit eine Liste nacheinander wirkt, ohne drei verschiedene Animationen.

Gestaffeltes fade-up auf Listeneinträgen

css 
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.reveal-list li {
opacity: 0;
animation: fade-up 0.45s ease forwards;
}

.reveal-list li:nth-child(1) { animation-delay: 0s; }
.reveal-list li:nth-child(2) { animation-delay: 0.08s; }
.reveal-list li:nth-child(3) { animation-delay: 0.16s; }

forwards behält die Stile des letzten Keyframes nach dem Zyklus — ohne das springen Einträge zurück auf opacity: 0 aus der Basisregel. Das ist animation-fill-mode mit echter Wirkung.

fill-mode bei einmaligem Einstieg

Einstiegsbewegungen laufen oft einmal. fill-mode entscheidet, ob Stile vor dem Delay und nach dem letzten Frame gelten.

Karten-Einstieg mit fill-mode both

css 
@keyframes card-in {
from {
opacity: 0;
transform: translateY(1rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.card-enter {
animation: card-in 0.5s ease 0.1s both;
}

Kurzform hier: Name card-in, Dauer 0.5s, Easing ease, Delay 0.1s, fill-mode both. both wendet den ersten Keyframe während des Delays an und hält den letzten danach.

Richtung, Play-State und wann nicht animieren

animation-direction: alternate läuft ungerade Zyklen vorwärts, gerade rückwärts — praktisch für sanftes Hin-und-her ohne doppelte Keyframes. animation-play-state: paused friert eine laufende Animation ein (z. B. Hover-Pause bei dekorativen Schleifen).

Für einfachen Hover-Farbwechsel bleiben Sie bei Transitions. Greifen Sie zu Animationen bei Schleifen, mehrstufigen Abläufen oder Bewegung ohne einzelnen State-Toggle. Bevorzugen Sie transform und opacity in Keyframes; width, height oder top zu animieren ist schwerer und ruckelt oft im Layout.

Selbst ausprobieren

  1. Puls mit drei Stopps (0% / 50% / 100%) nur auf opacity; dann kleines scale ergänzen.
  2. Spinner mit spin + linear + infinite; auf ease wechseln und das ungleichmäßige Gefühl bemerken.
  3. Drei Badges mit gleichen fade-up-Keyframes und Delays 0s, 0.1s, 0.2s staffeln — mit und ohne forwards vergleichen.
  4. Kurzform animation: card-in 0.5s ease 0.15s both auf ein Panel; both entfernen und Snap-back beobachten.
  5. Unter prefers-reduced-motion: reduce animation: none (oder kurzes Fade) für dekorative Schleifen setzen.

Typische Fehler

  • Erwarten, dass ein Hover-A→B-Fade „loopt“ — das ist Animations-Terrain, nicht eine einsame Transition
  • Tippfehler zwischen animation-name und @keyframes-Name — stilles No-Op
  • infinite auf großen, aufmerksamkeitsstarken Flächen ohne Pause oder Reduced-Motion-Pfad
  • Layout-Eigenschaften (width, margin, top) animieren, obwohl transform/opacity reichen
  • forwards / both bei Einmal-Reveals vergessen, die in der Basisregel mit opacity: 0 starten

Zusammenfassung

  • @keyframes definieren die Zeitleiste; animation (oder Longhands) spielen sie ab
  • Iteration, Richtung, Delay und fill-mode für Schleifen, Hin-und-her, Stagger und haftende Enden
  • transform/opacity bevorzugen; prefers-reduced-motion bei dekorativer Bewegung beachten
  • Transitions für einfache Zustandswechsel; Animationen für mehrstufige und wiederholte Bewegung
  • Als Nächstes in Effects & Motion: CSS Filters

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 61 von 63
Css Tutorial