CSS3 Transitions

Transitions – bewegende Momente

Was waren das noch (lästige) Zeiten, in dem man Animationen per nur per FLASH oder JavaScript erledigen musste und sich mit Plugin- und Browser-Versionen herumschlagen musste. Nachdem CSS3 und auch HTML5 vieles bereits vereinfacht und auch integriert hat, wofür man früher extra Tools benötigte, hier mal ein Beispiel.

Übrigens: Man kann mit „Transitions“ kein Film drehen, aber man kann Dinge animiert aussehen lassen. Transition bedeutet nicht anderes als „Übergang“ – nämlich von einem Zustand in den anderen. Dabei bleibt das Objekt grundsätzlich das gleiche, es verändert aber seine Lage, seine Größe oder die Farbe.

Eigenschaften

Das ganze kennt bestimmte Eigenschaften um einen Übergang zu steuern. Dazu wird einem Element, also z.B. enem DIV folgende Eigenschaften Syntax übergeben:

[css] div.float:hoover {
background-color:  green;
transition-property: background-color;
transition-duration: 3s;
}[/css]

Diese Definition setzt voraus, dass das DIV mit der Klasse „float“ schon zuvor mal eine Farbe als Hintergrund zugewiesen bekam und erst das Hoover Ereignis setzt die Transition dann in Gang. Nehmen wir also an, dass das float DIV zuvor einen weißen Hintergrund besaß um beim überfahren mit der Maus (Hoover) nun grün zu werden.

Für alle die, die lieber die Kurzschreibweise bevorzugen, also keine Einzelattribute deklarieren wollen, schreiben das ganze wie folgt:

[css] div.float:hoover {
background-color:  green;
transition: background-color 3s;
}[/css]

Ist doch fixer. Allerdings muss man sich die Reihenfolge irgendwie einprägen. Aber da das auch bei paddings, margin oder border geklappt hat, wird mans auch hier schaffen 😉

Hier mal das Bsp. von oben: