Tipps für bessere CSS-Transitions & Animationen

Kürzer halten, als man denkt

• Eine einzelne Transition: 0,15–0,4 Sekunden
• So lange beschleunigen, bis es sich zu schnell anfühlt, und dann schrittweise wieder etwas zurücknehmen

Die Aktion an die Kurve anpassen

• Bewegung ist genauso subjektiv wie Farbe, aber ebenso wichtig
• An Bewegungen aus der realen Welt denken und damit vergleichen

Beschleunigung und Verzögerung

• Wenn sich eine Animation unnatürlich anfühlt, liegt das daran, dass sie abrupt beginnt oder endet
• Selbst wenn es nur subtil ist, lohnt es sich, der cubic-bezier-Kurve easing-in/out hinzuzufügen
• Wenn es realistisch wirken soll, ist auch „Trägheit (Inertia)“ hilfreich

Weniger ist besser

• Je mehr sich an einem Element während der Animation verändert, desto größer ist das Risiko, dass es übertrieben wirkt
• Wenn die Transparenz von 0 auf 1 geht, statt 1 lieber einmal 0,4 ausprobieren. Wenn sich die Größe ändert, mit einer nur leicht kleineren Größe starten
• In den meisten Fällen sollten Animationen, die an ihre Position gleiten, sich nur zwischen 5 und 40 Pixeln bewegen

Browser-Standardwerte vermeiden

• Browser haben Kurven wie linear, ease, ease-in, ease-out und ease-in-out eingebaut
• Das ist bequem und in manchen Situationen nützlich, aber auch so allgemein, dass alles gleich aussieht (so wie Websites, die mit Bootstrap/Tailwind gebaut wurden, oft ähnlich wirken)
• Die Autovervollständigungswerte für cubic-bezier-Kurven in VS Code ausprobieren
• Oder die Entwicklerwerkzeuge des Browsers öffnen und den Kurveneditor verwenden

Mehrere Eigenschaften, mehrere Easings

• Nicht immer sinnvoll, aber wenn mehrere Eigenschaften gleichzeitig geändert werden müssen (etwa transform und opacity)
  • Manchmal sieht es gut aus, wenn dieselbe cubic-bezier-Kurve verwendet wird, aber in der Praxis nicht immer
  • Eine Kurve, die für transform gut funktioniert, kann für ein Fade ungeeignet sein
  • In solchen Fällen besser unterschiedliche Easings je CSS-Eigenschaft wählen
• Dazu @keyframes-Animationen nach Eigenschaften aufteilen oder mehrere Transitions verwenden
  • Für opacity etwa linear, für transform etwa cubic-bezier(.5, 0, .5, 1)

Versetzte Verzögerungen nutzen

• Wenn mehrere Elemente eine Transition bekommen, die Wirkung von animation-delay oder transition-delay nicht unterschätzen

In geht raus, Out kommt rein

• Es gibt drei Arten von Easing-Kurven
  • ease in (beginnt langsam)
  • ease out (endet langsam)
  • in-out (nur in der Mitte schnell, am Anfang und Ende langsam)
• Das Tückische an Transitions ist, dass man „in“ oft mit ease-out und „out“ mit ease-in animieren möchte
  • Eine Animation, bei der etwas hinausgeht und etwas anderes hereinkommt, wirkt für Nutzer wie ein einziger Wechsel, intern sind es aber zwei Übergänge
  • Das Herausgehende soll langsam sein, also braucht es ease-in, und das Hereinkommende sollte ease-out bekommen

Auf Hardwarebeschleunigung setzen

• Nicht jede CSS-Eigenschaft läuft auf jedem Gerät und in jedem Browser flüssig
• Immer hardwarebeschleunigungsfähige Eigenschaften
  • transform (alle translate-, scale-, rotate-Varianten sowie die 3D-Versionen)
  • opacity
• Je nach Fall hardwarebeschleunigungsfähige Eigenschaften
  • bestimmte SVG-Eigenschaften
  • filter (abhängig von Browser und Filter)
• Canvas und WebGL sind ebenfalls hardwarebeschleunigt, werden hier aber nicht behandelt
• Für Verschieben, Skalieren und Rotieren also immer die CSS-Eigenschaft transform verwenden
• Niemals die Größe oder Position eines Elements direkt verändern, egal was man macht
  • Wenn Eigenschaften wie height, width, border, margin oder padding, die das Seitenlayout beeinflussen, direkt geändert werden, kann die Seitenperformance spürbar langsamer werden

Bei Bedarf will-change verwenden

• Wenn eine Animation theoretisch flüssig und performant sein sollte, aber trotzdem ruckelig wirkt, die Eigenschaft will-change verwenden
• Damit wird vorab signalisiert, was sich ändern wird, sodass andere Berechnungen übersprungen werden können

Bonus: Die Präferenzen der Nutzer respektieren

• Nutzer können in den Geräteeinstellungen angeben, ob sie „reduced motion“ bevorzugen
• Diesen Wert per Media Query oder über JavaScript erkennen und entsprechend darauf reagieren