Beispiel
Ein Übergangseffekt mit der gleichen Geschwindigkeit vom Anfang bis zum Ende:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Versuch es selber " Definition und Verwendung
Der Übergang-Timing-Funktion Eigenschaft gibt die Geschwindigkeitskurve des Übergangseffekts.
Diese Eigenschaft ermöglicht eine Übergangseffekt Geschwindigkeit über die Dauer geändert werden.
| Standardwert: | ease |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transitionTimingFunction="linear" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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- |
CSS-Syntax
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| ease | Standardwert. Gibt einen Übergangseffekt mit einem langsamen Start, dann schnell, dann langsam zu beenden (equivalent to cubic-bezier(0.25,0.1,0.25,1) ) |
| linear | Gibt einen Übergangseffekt mit der gleichen Geschwindigkeit vom Anfang bis zum Ende (equivalent to cubic-bezier(0,0,1,1) ) |
| ease-in | Gibt einen Übergangseffekt mit einem langsamen Start (äquivalent zu cubic-bezier(0.42,0,1,1) ) |
| ease-out | Gibt einen Übergangseffekt mit einem langsamen Ende (äquivalent zu cubic-bezier(0,0,0.58,1) ) |
| ease-in-out | Gibt einen Übergangseffekt mit einem langsamen Start und Ende (äquivalent zu cubic-bezier(0.42,0,0.58,1) ) |
| step-start | Entspricht die steps(1, start) |
| step-end | Entspricht die steps(1, end) |
| steps(int,start|end) | Gibt eine Schrittfunktion mit zwei Parametern. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion. Es muss eine positive ganze Zahl (greater than 0) . Der zweite Parameter, der optional ist, ist entweder der Wert "start" oder "end" , und gibt den Punkt , an dem die Änderung der Werte innerhalb des Intervalls auftreten. Wenn der zweite Parameter weggelassen wird, wird es den Wert gegeben "end" |
| cubic-bezier( n , n , n , n ) | Definieren Sie Ihre eigenen Werte in der kubisch-Bezier-Funktion. Mögliche Werte sind Zahlenwerte von 0 bis 1 |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Tip: Probieren Sie die verschiedenen Werte in den folgenden Beispielen zu verstehen , wie es funktioniert!
Mehr Beispiele
Beispiel
Um besser auf die verschiedenen Funktionswerte zu verstehen: Hier sind fünf verschiedene div-Elemente mit fünf unterschiedlichen Werten:
/* For Safari 3.1 to 6.0 */
#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;}
/* Standard
syntax */
#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;}
Versuch es selber " Beispiel
Gleich wie das Beispiel oben, aber die Geschwindigkeitskurven werden mit der kubisch-Bezier-Funktion angegeben:
/* For Safari 3.1 to 6.0 */
#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);}
/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#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);}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS3 Transitions
HTML - DOM - Referenz: transitionTimingFunction property