CSS3 Transitions Basics

Seit CSS Version 3 kann man auch s.g. Transitions machen. Transitions sind nicht mehr als einfach Übergänge von css Eigenschaften wie Farben von zb. grün nach rot.

Aber am Besten geht das anhand eines Beispiels:

Ich erstelle einmal ein div:

<div class="willi"></div>

und mach es ein bisserl schön:

.willi {
 border-radius: 0.5em;
 margin: 0.5em;
 background-color: #aaeeaa;
 height: 6em;
 width: 5em;
}

Super, grünes Rechteck mit runden Ecken.

Angenommen ich will das jetzt beim :hover rot und ein bisschen größer werden lassen:

.willi:hover {
width: 20em;
background-color: #aa3311;
}

Naja, jetzt hüpft das von klein grün auf größer rot. Pro!

Jetzt kommen die Transitions ins Spiel:

In diesem simplen Beispiel definiere ich nur, dass die width und die background-color sich innerhalb 5 Sekunden von den einen Zustand auf den anderen ändern. Ich füge also der class willi folgende Transition dazu:

.willi {
transition: width 5s, background-color 5s;
}

Jetzt läuft die Transition schön.

Ansehen kann man sich das auf diesem Fiddle.

Die Vendor prefixe für transition (-moz-transition / -webkit-transition / -o-transition) braucht man in den aktuellen Browsern nicht mehr.

Also für einfache Übergänge sind CSS3 Transitions eine tolle, einfache Sache. Zumal sie auch von allen aktuellen Browsern unterstützt werden. Und wenn jemand mit einem alten Browser daherkommt, geht halt die Transition nicht. Auch kein Beinbruch.

Weiterreichende Informationen findet man im MDN.

Ein Gedanke zu „CSS3 Transitions Basics“

  1. Es ist schon unglaublich was man jetzt alles mit CSS3 machen kann ! Ich werde den ganzen JavaScript-Code für diese Art Transitionen keine Sekunde vermissen !

Kommentare sind geschlossen.