Interaktionen und Mouse-Over-Effekte mit CSS3-Transitions

Mit der CSS-Eigenschaft transition könnt ihr anschauliche Interaktionen und Mouse-Over-Effekte erzeugen, ohne dabei Javascript oder Flash verwenden zu müssen. Präziser ausgedrückt kann der Ausgangswert einer CSS-Eigenschaft fließend in einen neuen Wert übergehen (»Transition« zu Deutsch »Übergang«). In diesem Beitrag lernt ihr die in diesem Zusammenhang relevanten CSS-Eigenschaften kennen.

Die verschiedenen Eigenschaften von CSS3-Transitions

Die vier folgenden Longhand Properties stellt uns CSS zur Verfügung:

transition-property

legt fest, welche Eigenschaft geändert wird

transition-duration

regelt die Dauer der Animation

transition-timing-function

definiert den Geschwindigkeitsverlauf. Bei ease-in-out erfolgt die Animation zu Beginn beispielsweise langsam, beschleunigt dann und bremst gegen Ende noch einmal ab. Es existieren verschiedene Schlüsselbegriffe. 

transition-delay

ermöglicht eine zeitliche Verzögerung.

Eine Animation mit CSS3-Transitions erzeugen

Im folgenden Beispiel erstellen wir eine einfache Animation, und verwenden dazu die Pseudoklasse :hover als Auslöser für den Übergang.

Einfaches Beispiel einer Transition - Ein Div ändert seine Farbe beim Mouseover

.kreis {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
.kreis:hover {
  background-color: orange;
}

Die Kurzschreibweise für die oben gezeigte CSS-Transition schreibt sich wie folgt:

transition: background-color 2s ease-in-out 1s;

Dabei spielt die Reihenfolge der Werte eine untergeordnete Rolle, allerdings wird die erste Zahl als transition-delay interpretiert. Natürlich lassen sich so auch die Größe oder andere Eigenschaften eines Elements umwandeln und allerhand Effekte & Animationen erzeugen. Eine Liste aller animierbaren Eigenschaften findet ihr hier.

Die transition-timing-function genauer betrachtet

Für die transition-timing-function stehen fünf vordefinierte Werte zur Verfügung, deren Geschwindigkeitsverlauf hier kurz beschrieben wird:

ease:

kurz langsam - schnell - lange langsam

linear:

durchgehend gleich

ease-in:

langsamer Start

ease-out:

langsames Ende

ease-in-out:

langsam - schnell - langsam

Wenn euch die verfügbaren Standardwerte nicht ausreichen sollten, könnt ihr mit diesem Tool einen eigenen Verlauf der Animationsgeschwindigkeit festlegen. Die Schreibweise für die transition-timing-function wäre dann:

.transition-timing-function: cubic-bezier(0,1,1,0)

Stufenweise Übergänge sind auch möglich

Es ist auch möglich, den Übergang nicht fließend sondern stufenweise ablaufen zu lassen.

Beispiel anzeigen

steps( , start):

steps( , start) legt fest, dass der Übergang in 4 gleichmäßigen Schritten erfolgt und der Effekt zu Beginn (»start«) jedes Schrittes eintritt.

 transition-timing-function: steps (4, start)

steps(, end):

Bei steps( , end) tritt der Effekt entsprechend am Ende jedes Schrittes ein.
Die Schreibweise wäre entsprechend:

 transition-timing-function: steps (4, end)

Browser-Support

CSS3-Transitions werden vom Internet Explorer leider erst ab Version 10 unterstützt, auch für den Opera Mini gibt es keinen Support. In allen anderen Browsern funktionieren CSS3-Transitions. Damit auch ältere Versionen der Browser das Feature korrekt umsetzen, solltet ihr derzeit noch die entsprechenden Vendor-Prefixes verwenden. Den detaillierten Browser-Support entnehmt ihr bitte der Website caniuse.com.

-webkit-transition: background-color 2ms ease-out 1s;
-moz-transition: background-color 2ms ease-out 1s;
-o-transition: background-color 2ms ease-out 1s;
transition: background-color 2ms ease-out 1s;

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.