Übergänge und Animationen: @keyframes, transform, Timing

Animiere auf dem Compositor mit transform und opacity, strukturiere deine @keyframes und respektiere die Bewegungspräferenzen der Nutzenden.

10 Min. · 3 Fragen

Bevor du entscheidest, was du animierst, ruf dir die Rendering-Pipeline in Erinnerung: Layout (Geometrie), Paint (Pixel), Composite (Zusammensetzen der Ebenen auf der GPU). Das Animieren von width oder top löst bei jedem Frame ein Layout aus, oft gefolgt von einem Paint: das ist das Rezept für Ruckler unter 60 fps. transform und opacity werden direkt vom Compositor verarbeitet, ohne die ersten beiden Stufen erneut zu durchlaufen. Die professionelle Regel: Animiere nach Möglichkeit nur diese beiden Properties und simuliere den Rest (translate statt top, scale statt width).

.button {
  transform: translateY(0);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.15s ease-out;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.97);
}

Wenn ein Übergang nicht mehr ausreicht (Zwischenschritte, Schleifen, automatischer Start), wechsle zu @keyframes. Zwei Einstellungen machen den Unterschied zwischen einer sauberen Animation und einem visuellen Bug: animation-fill-mode steuert den Zustand vor dem Start (backwards wendet den ersten Keyframe während der Verzögerung an) und nach dem Ende (forwards friert den letzten ein); both kombiniert beides. Beachte außerdem, dass die Timing-Funktion zwischen jedem Keyframe-Paar gilt, nicht über die Gesamtdauer: Du kannst sie innerhalb eines Keyframes neu definieren.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  70% {
    transform: translateX(8px);
    opacity: 1;
  }
  to {
    transform: translateX(0);
  }
}

.toast {
  animation: slide-in 0.35s ease-out both;
}

Zwei ergänzende Werkzeuge, die man kennen sollte. will-change: transform hebt das Element vor der Animation auf seine eigene Ebene, was ein spätes Rastern vermeidet; aber jede Ebene kostet GPU-Speicher, wende es also erst kurz vor der Animation an und entferne es danach, niemals als dauerhaften Stil auf Dutzenden von Elementen. steps(n) ersetzt die kontinuierliche Interpolation durch diskrete Sprünge: unverzichtbar für Sprites, Schreibmaschinen-Cursor oder Uhren.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Warum sollte man für eine animierte Bewegung transform: translateX(100px) gegenüber left: 100px bevorzugen?
   • transform wird von älteren Browsern besser unterstützt
   • transform wird vom Compositor verarbeitet, ohne bei jedem Frame das Layout neu zu berechnen
   • left funktioniert nur bei absolut positionierten Elementen, transform überall
   • transform akzeptiert im Gegensatz zu left negative Werte
2. Der Toast soll während der Verzögerung von 0.5s vollständig transparent bleiben und nach dem Ende der Animation sichtbar bleiben. Welches Schlüsselwort vervollständigt die Kurzschreibweise animation?

   @keyframes fade-in {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   
   .toast {
     animation: fade-in 0.3s ease-out 0.5s ___;
   }

   • both
   • forwards
   • backwards
   • alternate
3. Was ist die korrekte Verwendung von will-change?
   • Es global auf * anwenden, um die ganze Seite zu beschleunigen
   • Es kurz vor einer aufwendigen Animation hinzufügen und danach entfernen
   • Es immer mit transform: translateZ(0) kombinieren
   • Es statt transition für Mikrointeraktionen verwenden