CSS - Eigenschaft transit -timing-function
Beispiel
Ein Übergangseffekt mit der gleichen Geschwindigkeit von Anfang bis Ende:
div {
transition-timing-function: linear;
}
Definition und Verwendung
Die transition-timing-function
Eigenschaft legt den Geschwindigkeitsverlauf des Übergangseffekts fest.
Diese Eigenschaft ermöglicht es einem Übergangseffekt, die Geschwindigkeit über seine Dauer zu ändern.
Standardwert: | Leichtigkeit |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.transitionTimingFunction="linear" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
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
Value | Description |
---|---|
ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
step-start | Equivalent to steps(1, start) |
step-end | Equivalent to steps(1, end) |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" |
cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Tipp: Probieren Sie die verschiedenen Werte in den Beispielen unten aus, um zu verstehen, wie es funktioniert!
Mehr Beispiele
Beispiel
Um die verschiedenen Funktionswerte besser zu verstehen: Hier sind fünf verschiedene div-Elemente mit fünf verschiedenen Werten:
#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;}
Beispiel
Wie im obigen Beispiel, aber die Geschwindigkeitskurven werden mit der kubischen Bezier-Funktion angegeben:
#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);}
Verwandte Seiten
CSS-Tutorial: CSS-Übergänge
HTML-DOM-Referenz: Eigenschaft transitTimingFunction