CSS/Eigenschaften/Animation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

CSS3 stellt Ihnen mit transition animierte Übergänge zur Verfügung. Mit animation können Sie diese Animationen mit verschiedenen Wegpunkten und Geschwindigkeiten steuern.


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


Folgende CSS-Eigenschaften sind verfügbar:

  • transition (einfache Animations-Variante)
  • animation (kompliziertere Variante für komplexe Abfolgen und Bewegungsmuster)
    • @keyframes (Wegpunkte für die Animation)
    • will-change (bereitet den Browser auf künftige Animationen vor, die dann bereits berechnet werden)
  • offset-path: Animieren entlang von Pfaden


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 keine weichen Übergang von einer Schriftart zur anderen erzeugen.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML