transition-timing-function
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die transition-timing-function CSS Eigenschaft legt fest, wie Zwischenwerte für CSS-Eigenschaften berechnet werden, die von einem Übergangseffekt betroffen sind.
Probieren Sie es aus
transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: steps(6, end); transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68); <section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section> #example-element { background-color: #e4f0f5; color: black; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #990099; color: white; margin-right: 40%; } Dies ermöglicht es Ihnen im Wesentlichen, eine Beschleunigungskurve festzulegen, sodass die Geschwindigkeit des Übergangs während seiner Dauer variieren kann.
Diese Beschleunigungskurve wird unter Verwendung einer <easing-function> für jede zu übertragende Eigenschaft definiert.
Sie können mehrere Easing-Funktionen angeben; jede wird auf die entsprechende Eigenschaft angewendet, wie sie durch die transition-property Eigenschaft angegeben ist, die als Liste von transition-property fungiert. Wenn weniger Easing-Funktionen angegeben werden als in der transition-property-Liste, muss der Benutzeragent berechnen, welcher Wert verwendet wird, indem die Liste der Werte wiederholt wird, bis es einen für jede Übergangseigenschaft gibt. Wenn es mehr Easing-Funktionen gibt, wird die Liste auf die richtige Größe gekürzt. In beiden Fällen bleibt die CSS-Deklaration gültig.
Syntax
/* Keyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* Function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); /* Steps Function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* Multiple easing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1); /* Global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: revert; transition-timing-function: revert-layer; transition-timing-function: unset; Werte
<easing-function>-
Jede
<easing-function>stellt die Easing-Funktion dar, die mit der entsprechenden zu übertragenden Eigenschaft verknüpft wird, wie intransition-propertydefiniert.Die Nicht-Schritt-Schlüsselwortwerte (ease, linear, ease-in-out, etc.) repräsentieren jeweils eine kubische Bézier-Kurve mit festen vier Punktwerten, wobei der
cubic-bezier()Funktionswert eine nicht vordefinierte Wertangabe ermöglicht. Die Schritt-Easing-Funktionen teilen die Eingabezeit in eine bestimmte Anzahl gleichlanger Intervalle. Es wird durch eine Anzahl von Schritten und eine Schrittposition definiert.ease-
Entspricht
cubic-bezier(0.25, 0.1, 0.25, 1.0), dem Standardwert, der die Geschwindigkeit in Richtung der Mitte des Übergangs erhöht und am Ende wieder verlangsamt. linear-
Entspricht
cubic-bezier(0.0, 0.0, 1.0, 1.0), Übergänge mit gleichmäßiger Geschwindigkeit. ease-in-
Entspricht
cubic-bezier(0.42, 0, 1.0, 1.0), beginnt langsam, wobei die Übergangsgeschwindigkeit bis zum Abschluss zunimmt. ease-out-
Entspricht
cubic-bezier(0, 0, 0.58, 1.0), beginnt schnell zu übertragen und verlangsamt sich im Verlauf des Übergangs. ease-in-out-
Entspricht
cubic-bezier(0.42, 0, 0.58, 1.0), beginnt langsam zu übertragen, beschleunigt sich und verlangsamt sich dann wieder. cubic-bezier(p1, p2, p3, p4)-
Eine durch den Autor definierte kubische Bézier-Kurve, wobei die Werte p1 und p3 im Bereich von 0 bis 1 liegen müssen.
steps(n, <jump-term>)-
Zeigt den Übergang entlang n Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeiträume angezeigt wird. Zum Beispiel, wenn n 5 ist, gibt es 5 Schritte. Ob der Übergang vorübergehend bei 0%, 20%, 40%, 60% und 80%, auf 20%, 40%, 60%, 80% und 100% hält oder 5 Stopps zwischen 0% und 100% entlang des Übergangs oder 5 Stopps inklusive der Marken 0% und 100% macht (bei 0%, 25%, 50%, 75% und 100%), hängt davon ab, welcher der folgenden Sprungbegriffe verwendet wird:
jump-start-
Bezeichnet eine links-stetige Funktion, sodass der erste Sprung beim Beginn des Übergangs passiert;
jump-end-
Bezeichnet eine rechts-stetige Funktion, sodass der letzte Sprung passiert, wenn die Animation endet;
jump-none-
Es gibt keinen Sprung an einem Ende. Stattdessen hält er an sowohl der 0%-Marke als auch der 100%-Marke, jeweils für 1/n der Dauer.
jump-both-
Beinhaltet Pausen bei sowohl der 0%- als auch der 100%-Marke, wodurch effektiv ein Schritt während der Übergangszeit hinzugefügt wird.
start-
Gleichbedeutend mit
jump-start. end-
Gleichbedeutend mit
jump-end.
step-start-
Entspricht
steps(1, jump-start) step-end-
Entspricht
steps(1, jump-end)
Barrierefreiheit
Einige Animationen können nützlich sein, beispielsweise um Benutzer anzuweisen, welche Aktionen erwartet werden, um Beziehungen innerhalb der Benutzeroberfläche aufzuzeigen und um Benutzer darüber zu informieren, welche Aktionen erfolgt sind. Animationen können helfen, die kognitive Belastung zu reduzieren, „Change Blindness“ zu verhindern und ein besseres Wiedererkennen räumlicher Beziehungen zu etablieren. Einige Animationen können jedoch für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein, und bestimmte Arten von Bewegungen können ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und lichtempfindliche Reaktionen sein.
Erwägen Sie die Bereitstellung eines Mechanismus zum Anhalten oder Deaktivieren der Animation sowie die Verwendung der Abfrage für reduzierte Bewegung (oder eines entsprechenden User Agent Client Hints Sec-CH-Prefers-Reduced-Motion), um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Vorliebe für weniger Animation ausgedrückt haben.
Formale Definition
| Anfangswert | ease |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
transition-timing-function =
<easing-function>#
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Beispiele
Beispiele für kubische Bézier
.ease { transition-timing-function: ease; } .ease-in { transition-timing-function: ease-in; } .ease-out { transition-timing-function: ease-out; } .ease-in-out { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb { transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2); } Schritt-Beispiele
.jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function: step-start; } .step-end { transition-timing-function: step-end; } Spezifikationen
| Specification |
|---|
| CSS Transitions # transition-timing-function-property |