CSS/Tutorials/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 wecken.

Gelungene Animationen verbessern die Interaktion und bringen eine individuelle Note in Ihre Webseite. Animieren kommt aus dem Lateinischen und heißt ursprünglich zum Leben erwecken.

transition
(weiche Übergänge zwischen zwei Werten)
animation
(komplexe Abfolgen und Bewegungsmuster)
- @keyframes (Wegpunkte für die Animation)
- Dauer und Wiederholungen
- will-change (bereitet den Browser auf künftige Animationen vor, die dann bereits berechnet werden)
offset: Animieren entlang von Pfaden
- offset-path
- offset-distance
- offset-anchor
- offset-rotate

Der Einsatz dieser CSS-Animationen hat einige Vorteile:

einfache Notation im CSS-Stylesheet anstelle in externen Scripten
performanter als externe JavaScript-Scripte oder sogar Flash-Dateien
in nicht sichtbaren Browser-Tabs wird die Animation gestoppt

Diese Eigenschaften sind auch in Kombination mit CSS-Transformationen interessant, da diese nicht von der CPU sondern von der GPU bearbeitet werden und somit für eine schnellere Verarbeitung sorgen.

Allerdings lassen sich nicht alle Eigenschaften animieren. So können Sie beispielsweise keinen weichen Übergang von einer Schriftart zur anderen erzeugen.

Hauptartikel: CSS/Eigenschaften/animierbare Eigenschaften

CSS-Animations dienen als Grundlage für die Web Animations API (WAAPI), in der CSS-Eigenschaften animiert und mit JavaScript gesteuert werden können.

Hauptartikel: JavaScript/Tutorials/Web Animations