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.

.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;