Quelle: Bild: Shutterstock
CSS: Animationen und -Transitions richtig einsetzen 02.04.2020, 10:25 Uhr

Gekonnt animieren

Wie man CSS-Animationen und Transitions am besten einsetzt.
Animationen sind längst nicht mehr aus dem Web wegzudenken: Ein Button pulsiert und lenkt die Aufmerksamkeit auf eine wichtige Aktion, ein modales Fenster erscheint nicht abrupt, sondern wächst, bis es die endgültige Größe erreicht hat, und bei Klick auf einen Menübutton schiebt sich die Navigation von außen in den Viewport. Die meisten Nutzer würden das, was sie da sehen, nicht als Animation bezeichnen – sie empfinden diese Dinge als ganz natürlich. Und so soll es sein: Animationen sollen nicht als Selbstzweck dienen, sondern für bessere Benutzeroberflächen sorgen.
Technisch gesehen lassen sich Animationen auf zwei Arten bewerkstelligen: Man kann sie per CSS definieren oder man kann per JavaScript bestimmte Werte in einer Schleife verringern oder erhöhen. Performanter sind eindeutig die Animationen, die mit CSS umgesetzt werden. Das heißt aber nicht, dass man kein JavaScript benötigt: Häufig nimmt man JavaScript, um in bestimmten Situationen eine Klasse hinzuzufügen oder zu entfernen, und dadurch die Animation auszulösen. Und es gibt natürlich die Web Animation API – eine Möglichkeit, CSS-Animationen per JavaScript umzusetzen.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar