CSS- Übergänge
CSS-Übergänge
Mit CSS-Übergängen können Sie Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos ändern.
Bewegen Sie den Mauszeiger über das Element unten, um einen CSS-Übergangseffekt zu sehen:
In diesem Kapitel lernen Sie folgende Eigenschaften kennen:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Browserunterstützung für Übergänge
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Wie verwende ich CSS-Übergänge?
Um einen Übergangseffekt zu erstellen, müssen Sie zwei Dinge angeben:
- die CSS-Eigenschaft, der Sie einen Effekt hinzufügen möchten
- die Dauer der Wirkung
Hinweis: Wenn der Dauerteil nicht angegeben ist, hat der Übergang keine Auswirkung, da der Standardwert 0 ist.
Das folgende Beispiel zeigt ein 100px * 100px rotes <div>-Element. Das Element <div> hat auch einen Übergangseffekt für die Eigenschaft width mit einer Dauer von 2 Sekunden festgelegt:
Beispiel
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Der Übergangseffekt beginnt, wenn die angegebene CSS-Eigenschaft (Breite) ihren Wert ändert.
Lassen Sie uns nun einen neuen Wert für die width-Eigenschaft angeben, wenn ein Benutzer mit der Maus über das <div>-Element fährt:
Beispiel
div:hover
{
width: 300px;
}
Beachten Sie, dass, wenn der Mauszeiger das Element verlässt, es allmählich wieder in seinen ursprünglichen Stil zurückkehrt.
Ändern Sie mehrere Eigenschaftswerte
Das folgende Beispiel fügt einen Übergangseffekt sowohl für die Breiten- als auch für die Höheneigenschaft hinzu, mit einer Dauer von 2 Sekunden für die Breite und 4 Sekunden für die Höhe:
Beispiel
div
{
transition: width 2s, height 4s;
}
Geben Sie die Geschwindigkeitskurve des Übergangs an
Die transition-timing-functionEigenschaft legt den Geschwindigkeitsverlauf des Übergangseffekts fest.
Die Eigenschaft transit-timing-function kann die folgenden Werte haben:
ease- spezifiziert einen Übergangseffekt mit einem langsamen Start, dann schnell, dann langsam enden (dies ist die Standardeinstellung)linear- gibt einen Übergangseffekt mit der gleichen Geschwindigkeit von Anfang bis Ende anease-in- legt einen Übergangseffekt mit langsamem Start festease-out- legt einen Übergangseffekt mit langsamem Ende festease-in-out- legt einen Übergangseffekt mit langsamem Start und Ende festcubic-bezier(n,n,n,n)- lässt Sie Ihre eigenen Werte in einer kubischen Bezier-Funktion definieren
Das folgende Beispiel zeigt einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:
Beispiel
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
Verzögern Sie den Übergangseffekt
Die transition-delayEigenschaft gibt eine Verzögerung (in Sekunden) für den Übergangseffekt an.
Das folgende Beispiel hat eine Verzögerung von 1 Sekunde vor dem Start:
Beispiel
div {
transition-delay: 1s;
}
Übergang + Transformation
Das folgende Beispiel fügt der Transformation einen Übergangseffekt hinzu:
Beispiel
div {
transition:
width 2s, height 2s, transform 2s;
}
Weitere Übergangsbeispiele
Die CSS-Übergangseigenschaften können wie folgt einzeln angegeben werden:
Beispiel
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
oder indem Sie die Kurzschrift-Eigenschaft verwenden transition:
Beispiel
div
{
transition: width 2s linear 1s;
}
CSS-Übergangseigenschaften
Die folgende Tabelle listet alle CSS-Übergangseigenschaften auf:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |