CSS3 Übergang-Timing-Funktion Eigenschaft
Beispiele
Transitions mit der gleichen Geschwindigkeit von Anfang bis Ende:
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Versuchen »
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.
Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.
| 属性 | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Attributdefinitionen und Anweisungen
Übergang-Timing-Funktion Eigenschaft gibt einen Übergangseffekt Geschwindigkeit.
Diese Eigenschaft ermöglicht es einen Übergangseffekt die Geschwindigkeit seiner Dauer zu ändern.
| Standard: | Leichtigkeit |
|---|---|
| Vererbung: | keine |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.transitionTimingFunction = "linear" |
Grammatik
| Wert | Beschreibung |
|---|---|
| linear | Rückstellungen mit der gleichen Geschwindigkeit die Übergangseffekt Enden (gleich kubisch-Bezier (0,0,1,1)) zu starten. |
| Leichtigkeit | Bereitstellung langsamen Start, dann schneller, dann langsamer Übergang Effekte Ende (kubisch-Bezier (0.25,0.1,0.25,1)). |
| Einfachheit in | Übergangsbestimmungen für die Wirkung einer langsamen Start (gleich der kubisch-Bezier (0.42,0,1,1)). |
| Leichtigkeit-out | Rückstellungen bis zum Ende der langsamen Übergangseffekte (entspricht kubisch-Bezier (0,0,0.58,1)). |
| Leichtigkeit-in-out | Übergangsbestimmungen in der Tat langsam beginnt und endet (gleich kubisch-Bezier (0.42,0,0.58,1)). |
| kubische Bezier (n, n,n, n) | Sie definieren Ihre eigenen Werte in der kubisch-Bezier-Funktion. Möglicher Wert ist eine Zahl zwischen 0-1. |
Tipp: Probieren Sie die verschiedenen Werte in denfolgenden Beispielen zu verstehen , wie es funktioniert!
Weitere Beispiele
Beispiele
Zum besseren Verständnis der Funktion der verschiedenen Werte verstehen: Es gibt fünf verschiedene div-Elemente, mit fünf unterschiedlichen Werten:
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
Versuchen »
Beispiele
Und das Beispiel oben, jedoch gibt die Geschwindigkeitskurve kubischen Bezier-Funktion:
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Versuchen »