Interaktionen und Mouse-Over-Effekte mit CSS-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.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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)
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!