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