CSS
Übergänge
Suche…
Syntax
- Übergang: [Übergangseigenschaft] [Übergangsdauer] [Übergangszeitfunktion] [Übergangsverzögerung];
Parameter
| Parameter | Einzelheiten |
|---|---|
| Übergangseigenschaft | Die spezifische CSS-Eigenschaft, deren Wertänderung umgestellt werden muss (oder all , wenn alle umschaltbaren Eigenschaften umgestellt werden müssen. |
| Übergangszeit | Die Dauer (oder Periode) in Sekunden ( s ) oder Millisekunden ( ms ), über die der Übergang stattfinden muss. |
| Übergangszeitfunktion | Eine Funktion, die beschreibt, wie die Zwischenwerte während des Übergangs berechnet werden. Häufig verwendete Werte sind ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , die steps() . Weitere Informationen zu den verschiedenen Timing-Funktionen finden Sie in den W3C-Spezifikationen . |
| Übergangsverzögerung | Die Zeit, die vergangen sein muss, bevor der Übergang beginnen kann. Kann in Sekunden ( s ) oder Millisekunden ( ms ) angegeben werden |
Bemerkungen
Einige ältere Browser unterstützen nur transition Herstellerpräfix :
-
-webkit: Chrome 25-, Safari 6-, Safari & Chrome für iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- für Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Beispiel:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Übergangskurzschrift
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
In diesem Beispiel wird die Hintergrundfarbe geändert, wenn das div angezeigt wird.
Transition (Longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- Übergangseigenschaft : Gibt die CSS-Eigenschaften an, für die der Übergangseffekt gilt. In diesem Fall wird das div sowohl horizontal als auch vertikal erweitert, wenn es im Hover-Modus ist.
- Übergangsdauer : Gibt die Zeitdauer an, für die ein Übergang abgeschlossen ist. Im obigen Beispiel dauern die Höhen- und Breitenübergänge 1 Sekunde bzw. 500 Millisekunden.
- Transition-Timing-Funktion : Bestimmt die Geschwindigkeitskurve des Übergangseffekts. Ein linearer Wert zeigt an, dass der Übergang vom Anfang bis zum Ende die gleiche Geschwindigkeit hat.
- Übergangsverzögerung : Gibt an, wie lange es dauert, bis der Übergangseffekt beginnt. In diesem Fall beginnt die Höhe sofort mit dem Übergang, während die Breite 1 Sekunde wartet.
Kubik-Bezier
Die cubic-bezier Funktion ist eine Übergangszeitfunktion, die häufig für benutzerdefinierte und glatte Übergänge verwendet wird.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Die Funktion benötigt vier Parameter:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Diese Parameter werden auf Punkte abgebildet, die Teil einer Bézier-Kurve sind :
Bei CSS-Bézier-Kurven liegen P0 und P3 immer an derselben Stelle. P0 liegt bei (0,0) und P3 bei (1,1), was bedeutet, dass die an die Cubic-Bezier-Funktion übergebenen Parameter nur zwischen 0 und 1 liegen können.
Wenn Sie Parameter übergeben, die nicht in diesem Intervall liegen, verwendet die Funktion standardmäßig einen linear Übergang.
Da Cubic-Bezier der flexibelste Übergang in CSS ist, können Sie alle anderen Übergangszeitfunktionen in Cubic-Bezier-Funktionen übersetzen:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
cubic-bezier(0.42, 0.0, 0.58, 1.0) ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)