Beispiel
Ändern, um die Geschwindigkeitskurve eines Übergangseffekt:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Versuch es selber " Definition und Verwendung
Die transitionTimingFunction Eigenschaft gibt die Drehzahlkurve des Übergangseffektes.
Diese Eigenschaft ermöglicht eine Übergangseffekt Geschwindigkeit über die Dauer zu ändern.
Browser-Unterstützung
Die transitionTimingFunction Eigenschaft wird in Internet Explorer 10, Firefox, Opera und Chrome unterstützt.
Safari unterstützt eine Alternative, die WebkitTransitionTimingFunction Eigenschaft.
Hinweis: Die transitionTimingFunction Eigenschaft wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.
Syntax
Bringen Sie die transitionTimingFunction Eigenschaft:
object .style.transitionTimingFunction Stellen Sie die transitionTimingFunction Eigenschaft:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| ease | Standardwert. Gibt einen Übergangseffekt mit einem langsamen Start, dann schnell, dann langsam beenden (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Gibt einen Übergangseffekt mit der gleichen Geschwindigkeit von Anfang bis Ende (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Gibt einen Übergangseffekt mit einem langsamen Start (entspricht cubic- bezier(0.42,0,1,1) ) |
| ease-out | Einen Übergangseffekt mit einem langsamen Ende (äquivalent zu cubic- Gibt bezier(0,0,0.58,1) ) |
| ease-in-out | Gibt einen Übergangseffekt mit einem langsamen Start und das Ende (entspricht cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Definieren Sie Ihre eigenen Werte in der kubisch-Bezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1 |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben |
Technische Details
| Standardwert: | Leichtigkeit |
|---|---|
| Rückgabewert: | Ein String, die die Übergangszeitfunktion Eigenschaft eines Elements |
| CSS Version | CSS3 |
Verwandte Seiten
CSS Referenz: transition-timing-function property - transition-timing-function property
<Style - Objekt