Animierte Menüs und Buttons waren lange Zeit nur mit Javascript oder anderen Zusätzen möglich. Mit CSS3 gibt es erstmals browserübergreifend Möglichkeiten verschiedenste CSS Attribute zu animieren. Dadurch lassen sich vielfältige Effekte realisieren.

Das sind nur ein paar Beispiele was man erreichen kann. Und alles nur mit HTML und CSS!

Der Schlüssel zu allen diesen Dingen ist das neue CSS Attribut „transition“ mit dem sich angeben lässt welche anderen Attribute animiert werden und wie die Animation ablaufen soll.

.growing {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    width: 20px;
}
.growing:hover {
    width: 100px;
}

In diesem Beispiel wird das Attribut „width“, also die Breite des Elements, animiert.  Die Dauer der Animation ist 1 Sekunde und sie startet linear nach 2 Sekunden. Damit nicht jedesmal alle Werte einzeln angegeben werden müssen gibt es eine short-hand Variante:

transition: width 1s linear 2s;

Damit wird der gleiche Effekt erreicht. Die Timing Funktion und dier Verzögerung kann man weglassen, die Dauer sollte aber angegeben werden da der Default-Wert bei 0 liegt.

Mehrere animierte Attribute lassen sich auch in einer Transition Angabe unterbringen, sie werden dann mit Komma getrennt.

transition: width 1s, height 0.5s;

So lassen sich vielfältige Animationen und Effekte unterbringen ohne zusätzliche Scripte in Anspruch zu nehmen. Und für Browser die keine Transitions unterstützen stellt das auch kein Problem dar, hier werden die Animationen einfach nicht angezeigt.

Zum Abschluss noch ein paar Informationen:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
  (Eine Auflistung welche Attribute animierbar sind)
• http://www.w3schools.com/cssref/css3_pr_transition.asp
  (Informationen zum „transition“ Attribut. Hier gibt es auch weitere Infos welche Werte für die Timing-Funktion zur Verfügung stehen)