nicht angemeldet
SELF-Wiki: Animation
Das menschliche Auge reagiert instinktiv auf Bewegung. Deshalb sind Animationen eine gute Möglichkeit, Aufmerksamkeit auf wichtige Bereiche deiner Webseite zu lenken und Interesse zu erregen.
Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, überlegten wir auf unserem Stammtisch, wie und wann man überhaupt Animationen einsetzen sollte. Auf keinen Fall wollten wir eine Sammlung von loading spinnern präsentieren.
In Animation/Übergänge wird gezeigt, wie man die Änderung eines Zustands, etwas beim Hovern mit der Maus anzeigen kann. Mit transition wird ein weicher Übergang zwischen zwei Werten interpoliert.
Im Tutorial zu mehrstufigen Animationen merkten wir schnell, dass CSS Zustände selektieren kann – oft aber nach jeder Benutzeraktion neu überprüft werden muss, ob Eingaben korrekt sind. Deshalb helfen einige Zeilen JavaScript dem Nutzer eine direkte Rückmeldung zu geben:
Auch SVG kann mit CSS animiert werden. Hier finden sich einige Tricks wie animierte Randlinien, die eben nur mit SVG und stroke bzw. stroke-dasharray funktionieren.
Nicht alles ist neu – unsere SVG-Uhr gibt es schon seit 2020:
Unser Fazit: Animationen können Webseiten aufwerten und Zustandsänderungen und Benutzeraktionen visualisieren, sie sollten aber nie zum Selbstzweck werden!
veröffentlicht von
Matthias Scharwies