Ü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. Was bewirkt animation-fill-mode: both?
   • Die Animation läuft vorwärts und dann rückwärts
   • Die Animation gilt für das Element und für seine Nachfahren
   • Die Stile des ersten Keyframes gelten während der Verzögerung, und die Stile des letzten Keyframes bleiben nach dem Ende erhalten
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