transition-timing-function

Die Eigenschaft transition-timing-function, die normalerweise als Teil der transition-Kurzschreibweise verwendet wird, dient zur Definition einer Funktion, die beschreibt, wie ein Übergang über seine Dauer fortschreitet, und ermöglicht es einem Übergang, seine Geschwindigkeit während seines Verlaufs zu ändern.

.example {
    transition-timing-function: ease-out;
}

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

Die zulässigen vordefinierten Schlüsselwortwerte sind

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

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

Jedes der vordefinierten Schlüsselwörter hat einen äquivalenten kubischen Bézier-Kurvenwert oder einen äquivalenten Schrittfunktionswert. Zum Beispiel wären die folgenden beiden Timing-Funktionswerte gleichwertig

.example {
    transition-timing-function: ease-out;
}

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

Ebenso wären die folgenden beiden

.example {
    transition-timing-function: step-start;
}

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

Verwendung von steps() und Bézier-Kurven

Die Funktion steps() ermöglicht die Angabe von Intervallen für die Timing-Funktion. Sie nimmt einen oder zwei Parameter, durch ein Komma getrennt: eine positive Ganzzahl und einen optionalen Wert entweder start oder end. Wenn kein zweiter Parameter angegeben wird, wird standardmäßig end verwendet.

Um Schrittfunktionen zu verstehen, hier ist eine Demo, die steps(4, start) für die linke Box und steps(4, end) für die rechte Box verwendet (fahren Sie mit der Maus über eine Box oder laden Sie den Frame neu, um die Übergänge zu sehen)

Check out this Pen!

Wenn start angegeben wird, tritt die Änderung der Werte zu Beginn jedes Intervalls ein, während end bewirkt, dass die Änderung der Werte am Ende jedes Intervalls eintritt.

Ein detaillierter Blick auf Bézier-Kurvenwerte liegt außerhalb des Rahmens dieser Referenz. Siehe jedoch die Referenzen im Abschnitt "Verwandte Links" für Tools, die visuell demonstrieren, wie diese Werte funktionieren.

Für die Kompatibilität in allen unterstützenden Browsern sind Vendor-Präfixe erforderlich, wobei die Standard-Syntax 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 transition-timing-function unterstützt) benötigt das Präfix -ms- nicht.

Verwandte Eigenschaften

• transition
• transition-property
• transition-duration
• transition-delay

Weitere Ressourcen

• transition-timing-function bei W3C
• transition-timing-function bei MDN
• Visualisierung von Transition-Timings
• cubic-bezier.com von Lea Verou
• CSS kubischer Bézier-Builder von Rob La Placa
• CSS3 Bezier Curve Tester von Michael Gotta
• Ceaser von Matthew Lein

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	Funktioniert	4+	10.5+	10+	2.1+	3.2+