CSS-Eigenschaft: transition-timing-function, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)
Geschwindigkeitsverhalten einer Transition
Bestimmt, ob eine Transition von Anfang bis Ende in gleicher Geschwindigkeit läuft, langsam beginnt, langsam endet oder schrittweise abläuft.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Geschwindigkeitsverhalten einer Transition |
| ease |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Transitions (CSS 3):
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- transition
- transition-delay
- transition-duration
- transition-property
- Aktuelle Seite: transition-timing-function
Folgendes ist beim Einsatz von transition-timing-function zu beachten:
- transition-timing-function steuert das Geschwindigkeitsverhalten einer Transition. Es stehen verschiedene Schlüsselworte zur Verfügung sowie die Anweisungen cubic-bezier() und steps(), über die man das Verhalten individuell bestimmten kann.
- Schlüsselworte (Keywords):
- ease (Standard): Die Transition beginnt verlangsamt, nimmt schnell Geschwindigkeit auf und endet langsam. 2/3 der Transition ist nach der halben Zeit dargestellt.
- ease-in: Die Transition beginnt langsam, endet schnell.
- ease-out: Die Transition startet schnell, endet langsam.
- ease-in-out: Die Transition beginnt und endet langsam, in der Mitte ist die Geschwindigkeit am höchsten.
- linear: Gleichbleibende Geschwindigkeit, keine Verlangsamung am Anfang oder Ende der Transition.
- cubic-bezier():
- cubic-bezier(x1, y1, x2, y2) steuert die Transition nach eigenen Angaben. Die ersten zwei Werte bestimmen die Startgeschwindigkeit, der dritte und vierte Wert die Endgeschwindigkeit. Der Geschwindigkeitsverlauf ergibt sich aus der Kurve, welche Start- und Endpunkt verbindet. Alle vier Parameter sind Pflichtparameter.
- cubic-bezier() ist die Formel, auf deren Grundlage der der Geschwindigkeitsverlauf berechnet wird. Hinter allen Schlüsselworten verbirgt sich eine cubic-bezier()-Definition mit konkreten Werten. Weiterführende Information unter https://developer.mozilla.org/en/CSS/timing-function
- steps():
- bestimmt keinen fließenden, sondern einen schrittweisen Übergang, vergleichbar mit einer Uhr, die von Sekunde zu Sekunde springt, und dort jeweils eine Sekunde verharrt.
- steps(nr, [start|end]) benötigt immer zwei Parameter:
- Als erster wird die Anzahl der Schritte definiert, in denen die Transition angezeigt werden soll.
- Der zweite Parameter hat die möglichen Werte: start oder end. Damit wird bestimmt, ob ein Schritt vor oder nach einem Zeitintervall dargestellt werden soll.
- step-start ist ein Schlüsselwort und entspricht steps (1,start).
- step-end ist ebenfalls ein »Keyword« und entspricht steps (1,end). Beide Schlüsselworte sind also fest definiert auf einen Schritt in der Transition.
- steps() ist W3C nur im Entwicklungsbereich des Standards zu finden, im »Working Draft« des W3C taucht dieser Parameter für die transition-timing-function noch nicht auf. Allerdings werden sie bereits von Firefox, Safari und Chrome unterstützt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
Eine umfassende Einführung in Transitions ist bei den Webkrauts zu finden: CSS3 im Praxistest: Transition
Eine sehr anschauliche Darstellung der transition-timing-function ist unter http://peter.sh/experiments/css3-transition-timing-functions/ zu finden.
W3C: CSS Transitions Editor's Draft 20 December 2011 http://dev.w3.org/csswg/css3-transitions/#transition-timing-function.
Weiterführende Informationen zu transition-timing-function:
- W3C Spezifikation:
http://www.w3.org/TR/css3-transitions/#transition-timing-function
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
transition-property - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
unicode-bidi
Beispiele
HTML:
<div class="example-1">transition-timing-function</div>CSS:
div {
border: 1px solid #333;
text-align: center;
padding: 30px;
font-weight: 700;
background-color: #00C0FF;
height: 20px;
/* Firefox */
-moz-transition-property: height;
-moz-transition-duration: 2s;
/* Safari und Chrome */
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
/* Opera */
-o-transition-property: height;
-o-transition-duration: 2s;
/* Internet Explorer */
-ms-transition-property: height;
-ms-transition-duration: 2s;
/* Standard */
transition-property: height;
transition-duration: 2s;
}
div:hover {
height: 150px;
}
/* Hier die Definition der Transition selber. Standard für transition-timing-function ist ease. */Beispiel nur für: 
W3C: 10
-o-: 11.6W3C: 12.1
Beispiel Nr. 1 So sieht's aus:
transition-timing-function
HTML:
<div class="example-2">transition-timing-function</div>CSS:
div.example-2 {
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
transition-timing-function: linear;
}
/* Gleichbleibende Geschwindigkeit von Anfang bis Ende. */Beispiel nur für:
W3C: 10
-o-: 11.6W3C: 12.1
Beispiel Nr. 2 So sieht's aus:
transition-timing-function
HTML:
<div class="example-3">transition-timing-function</div>CSS:
div.example-3 {
-moz-transition-timing-function: cubic-bezier(0.2, 0.9, 0.9, 0.2);
-webkit-transition-timing-function: cubic-bezier(0.2, 0.9, 0.9, 0.2);
-o-transition-timing-function: cubic-bezier(0.2, 0.9, 0.9, 0.2);
-ms-transition-timing-function: cubic-bezier(0.2, 0.9, 0.9, 0.2);
transition-timing-function: cubic-bezier(0.2, 0.9, 0.9, 0.2);
}
/* Die einzelnen Werte bestimmen Start-, Verlaufs- und Endgeschwindigkeit der Transition. */Beispiel nur für:
W3C: 10
-o-: 11.6W3C: 12.1
Beispiel Nr. 3 So sieht's aus:
transition-timing-function
HTML:
<div class="example-4">transition-timing-function</div>CSS:
div.example-4 {
-moz-transition-timing-function: steps(5,start);
-webkit-transition-timing-function: steps(5,start);
-o-transition-timing-function: steps(5,start);
-ms-transition-timing-function: steps(5,start);
transition-timing-function: steps(5,start);
}
/* Hier der schrittweise Übergang. Opera unterstützt
steps() noch nicht. Er stellt ease dar. */Beispiel nur für:
W3C: 10
-o-: 11.6W3C: 12.1
Beispiel Nr. 4 So sieht's aus:
transition-timing-function
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!