Übergangszeitfunktion - CSS-Tricks

Die transition-timing-functionEigenschaft, die normalerweise als Teil der transitionKurzform verwendet wird, wird verwendet, um eine Funktion zu definieren, die beschreibt, wie ein Übergang über seine Dauer abläuft, sodass ein Übergang während seines Verlaufs seine Geschwindigkeit ändern kann.

.example ( transition-timing-function: ease-out; )

Diese Zeitsteuerungsfunktionen werden üblicherweise als Beschleunigungsfunktionen bezeichnet und können mithilfe eines vordefinierten Schlüsselwortwerts, einer Schrittfunktion oder einer kubischen Bézier-Kurve definiert werden.

Folgende vordefinierte Schlüsselwortwerte sind zulässig:

Leichtigkeit
linear
Easy-In
Leichtigkeit
Easy-In-Out
Schritt-Start
Stufenende

Bei einigen Werten ist der Effekt möglicherweise nicht so offensichtlich, es sei denn, die Übergangsdauer ist auf einen größeren Wert eingestellt.

Jedes der vordefinierten Schlüsselwörter hat einen äquivalenten kubischen Bézier-Kurvenwert oder einen äquivalenten Schrittfunktionswert. Beispielsweise wären die folgenden zwei Zeitfunktionswerte einander äquivalent:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Wie die folgenden zwei:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Verwenden der Schritte () und Bézier-Kurven

Mit dieser steps()Funktion können Sie Intervalle für die Timing-Funktion festlegen. Es werden ein oder zwei Parameter benötigt, die durch ein Komma getrennt sind: eine positive Ganzzahl und ein optionaler Wert von entweder startoder end. Wenn kein zweiter Parameter enthalten ist, wird standardmäßig auf end.

Um die Schrittfunktionen zu verstehen, finden Sie hier eine Demo, die steps(4, start)für die Box links und steps(4, end)für die Box rechts verwendet wird (bewegen Sie den Mauszeiger über eine Box oder laden Sie den Frame neu, um die Übergänge anzuzeigen):

Schauen Sie sich diesen Stift an!

Wenn startangegeben, erfolgt die Änderung der Werte zu Beginn jedes Intervalls, während enddie Änderung der Werte am Ende jedes Intervalls erfolgt.

Ein detaillierter Blick auf die Bézier-Kurvenwerte würde den Rahmen dieser Referenz sprengen. In den Referenzen im Abschnitt "Verwandte Links" finden Sie jedoch Tools, die die Funktionsweise dieser Werte visuell veranschaulichen.

Für die Kompatibilität in allen unterstützenden Browsern sind Herstellerpräfixe erforderlich, wobei die Standardsyntax zuletzt deklariert wird:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (die erste stabile Version von IE, die unterstützt wird transition-timing-function) benötigt kein -ms-Präfix.