Action ohne Skript

HTML-Elemente animieren – nur mit Cascading Style Sheets

Wissen | Know-how

Per CSS3-Animation lassen sich HTML-Elemente über einen vorgegebenen zeitlichen Verlauf drehen, verschieben, verzerren, farblich verändern und vieles mehr. Damit kann man beispielsweise eine tickende Pendeluhr auf den Bildschirm bringen.

Cascading Style Sheets (CSS) erlauben mit Hilfe von Übergängen (Transitionen) und Transformationen schon seit Längerem das Animieren von HTML-Elementen. Wie mit dem berühmt-berüchtigten <marquee>-Element lassen sich so beispielsweise Texte von der Seite in den Bildschirm scrollen oder beliebige Elemente stauchen, scheren, rotieren oder anderweitig verändern [1]. So sorgen etwa die CSS-Definitionen

a {
  transition: color 0.2s ease;
  color: Orange;
}
a:hover { 
  transition: color 0.5s ease;
  color: FireBrick;
}

dafür, dass Links beim Drüberfahren mit der Maus binnen 0,5 Sekunden ihre Farbe stufenlos von Orange nach Ziegelstein ändern. Verlässt der Mauszeiger das <a>-Element, wird es innerhalb von 0,2 Sekunden wieder orange. ...

Sie möchten wissen, wie es weitergeht?

Als c't-Plus-Abonnent gratis lesen

Anmelden als c't-Plus-Abonnent

weiterführende Links

Weitere Bilder

  • Auch nicht quantifizierbare CSS-Eigenschaften wie background-image lassen sich animieren, auch parallel zu anderen wie beispielsweise transform.

Anzeige