CSS-Animation

Auf Webseiten bedeutet Animation eine Veränderung eines darauf befindlichen Objektes. Dies kann zum Beispiel heißen, dass sich das Objekt von A nach B bewegt, die Farbe ändert oder die Form. Das kann Seiteninhalte, UI Elemente oder Bilder bzw. Typografie betreffen welche in eine Veränderung oder Bewegung gebracht werden.

Animation bedeutet auch, dass diese Veränderung nicht schlagartig, von einem Moment auf den anderen passiert, sondern mehr oder weniger langsam über mehrere Einzelschritte. Diese bemerkt der Beobachter im Normalfall nicht, da diese sehr schnell hintereinander ablaufen (analog zum Kino). Dadurch können bestimmte Buttons oder Elemente von Websites in den Vordergrund gerückt werden oder um die Aufmerksamkeit des Besuchers buhlen und eine Interaktion forcieren.

Mit CSS 3-Animationen, die inzwischen von allen modernen Browsern unterstützt werden, können durch Verwendung von @keyframes-Regeln, die den Start und das Ende der Animation festlegen, die meisten HTML-Elemente ohne Verwendung von Flash oder Javascript animiert werden. Ein Vorteil ist, dass der Browser die Performanceselbstständig optimieren kann, da er selbst die Animation kontrolliert.

zurück