WIe können Animationen auf einer Website erstellt werden?

Moderne Browser unterstützen durch Techniken aus HTML5 und CSS3 Möglichkeiten zur Animation von Objekten auf Websites. Grundlegend unterscheidet man zwischen sog. Übergängen (engl. transition) und zeitgesteuerten Abläufen (engl. Keyframes).

Die wichtigsten Techniken sind:

• Änderung eines grafischen Parameters, z.B. der Hintergrundfarbe
• Bewegung eines Objekts
• Vergrößerung bzw. Verkleinerung
• Drehung

Übergänge: Veränderung beim Seitenaufruf oder bei Mouse-Over

Übergänge können zum Beispiel der Wechsel der Hintergrundfarbe in einer bestimmten Zeiteinheit sein. Ausgelöst werden können Übergänge beispielsweise, beim Aufruf der Website oder wenn der Besucher die Maus über ein Element bewegt (sog. "Mouse-Over"). Anders als bei Keyframe-Animationen lassen sich zeitliche Abläufe nur über verzögert einsetzende Bewegungen (delay) oder unterschiedlich lange Zeiteinheiten realisieren.

Keyframes: volle Kontrolle über Elemente, Bühne und Zeit

Keyframe-Animationen kommen dann zum Einsatz, wenn komplexere zeitliche Abläufe präzise gesteuert werden müssen: vergleichbar mit einer klassischen Animation laufen hierbei auf einer "Bühne" (also einem Bereich der Website) verschiedene Ereignisse parallel ab. Alle Elemente der Animation orientieren sich an einer festgelegten Zeitschiene.

Durch Bewegung oder Veränderung die Usability steigern

Die gängigsten Methode, Bewegung auf die Website zu bringen, ist auch ein entscheinder Vorteil für die Bedienbarkeit (Usability): Veränderungen, wenn der Benutzer die Maus über Bedienelemente wie Menüpunkte, Buttons, Links etc. bewegt zeigen dem Besucher an, dass hier etwas passiert und zu entdecken ist. Diese Möglichkeit kommt entsprechend häufig zum Einsatz.