CSS3 Transitions – Animierte Effekte ohne viel Aufwand

Sebastian Pohl - 18. Februar 2014

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.

Hover me!
Hover me!
Hover me!

 

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:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.