Animation

Das menschliche Auge reagiert instinktiv auf Bewegung. Deshalb sind Animationen eine gute Möglichkeit, Aufmerksamkeit auf wichtige Bereiche Ihrer Webseite zu lenken und Interesse zu erregen. Animieren kommt aus dem Lateinischen und heißt ursprünglich zum Leben erwecken.

Gelungene Animationen verbessern die Interaktion und bringen eine individuelle Note in Webseiten.

Übergänge – sanfte Veränderungen ohne Aufwand

weiche Übergänge zwischen zwei Zuständen mit transition
mehrstufige Animationen
komplexe Abfolgen und Bewegungsmuster
- keyframes (Wegpunkte für die Animation)
- Dauer und Wiederholungen
Pfad-Animationen

entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

Siehe auch

Web Animations (WAAPI)

Animationen mit JavaScript steuern
Bilder präsentieren
- Bildergalerie mit Scroll Snap
- Lazy loading mit animation-timeline: view()
Transform

mit CSS

drehen,
skalieren, schräg
stellen und
verschieben
Icons mit SVG-Sprites
- SVGs optimieren
- currentColor
- animierte Icons
- mehrfarbige SVG-Icons (in Arbeit)
Shape-Morphing
eine Form fließend in eine andere verwandeln