HowTo: CSS3 - Animationen mit transition

Seit dem es CSS3 gibt, ist es ziemlich einfach geworden Animationen oder Transformationen ohne JavaScript oder gar Flash zu erstellen. In diesem Artikel behandeln wir zunächst die Eigenschaft "transition", mit der wir verschiedene animierte Veränderungen erstellen können.

Die CSS Eigenschaft transition ist ein Effekt, mit dem man das Aussehen eines Elements über eine gewisse Zeit verändern kann. Will man beispielsweise das ein Link, wenn man mit der Maus über ihn fährt, seine Farbe nicht sofort, sondern langsamer (animiert) verändert, benutzt man dafür transition.
Um die Eigenschaft zu benutzten ist es wichtig das man zumindest folgende zwei Dinge dazu angibt: Was soll verändert werden und wie lange soll es dauern.

Nehmen wir folgendes Beispiel:
HTML:
<a href="#">Ich werde Blau!</a>

CSS:

a {
    color: red;
    transition: color 1s;
}
a:hover {
    color: blue;
}
Wird zu: Ich werde Blau! Doch was genau ist hier passiert? Zuerst haben wir dem a Tag die Farbe rot gegeben. Als nächstes haben wir a:hover die Farbe blau gegeben. Das bedeutet, fährt man mit der Maus über den Link, wird er blau. Durch das transition verändert sich die Farbe animiert innerhalb einer Sekunde von rot zu blau und wieder zurück. Transition erlaubt es einem außerdem, eine gewisse Verzögerung festzulegen.
a {
    color: red;
    transition: color 1s 1.5s;
}
a:hover {
    color: blue;
}
Wird zu: Ich werde verzögert Blau! Die veränderung wird nun 1.5 Sekunden später aufgerufen und auch wieder umgekehrt. Zuletzt kann man noch einstellen, in welcher Zeitkurve die veränderung stattfinden soll. ease: Startet langsam, wird schnell und endet wieder langsam (Standard). linear: Ist die ganze Zeit gleich schnell. ease-in: Hat einen langsamen Start. ease-out: Hat ein langsames Ende. ease-in-out: Startet und endet langsam Eingefügt wird diese "timing-function" direkt nach der Dauer.

Zusammenfassung

transition: property duration timing-function delay Einzeln geschrieben:
transition-property: color  /* Die zu verändernde Eigenschaft (Standard ist "all" also alle) */

transition-duration: 1s     /* Wie lange die veränderung dauern soll */

transition-timing-function: linear /* Wie die veränderung aussehen soll */

transition-delay: 1.5s      /* Welche verzögerung es geben soll */

Browserunterstützung


  • Internet Explorer: 10

  • Google Chrome: 4 (-webkit-), 26 (ohne -webkit-)

  • Mozilla Firefox: 4 (-moz-), 16 (ohne -moz-)

  • Safari: 3.1 (-webkit-), 6.1 (ohne -webkit-)

  • Opera: 10.5 (-o-), 12.1 (ohne -o-)