Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: transition-timing-function, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)

Geschwindigkeits­verhalten einer Transition

Bestimmt, ob eine Transition von Anfang bis Ende in gleicher Geschwindigkeit läuft, langsam beginnt, langsam endet oder schrittweise abläuft.

CSS-Eigenschaft: transition-timing-function
KurzbeschreibungWerteStandardwertKategorieHinweis
Geschwindigkeits­verhalten einer Transition
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps()
  • cubic-bezier()
ease
Allgemein:
Animierte Inhalte
CSS 3:
Transitions
Neu in CSS 3
 

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.
Browserunterstützung von transition-timing-function
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
-webkit-j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
-webkit-j
Version: 10Version: 11Version: 12
n-o-j

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:



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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
Opera
-o-: 11.6W3C: 12.1
Safari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
Opera
-o-: 11.6W3C: 12.1
Safari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
Opera
-o-: 11.6W3C: 12.1
Safari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
Opera
-o-: 11.6W3C: 12.1
Safari

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.029 sec.

Browser-Marktanteile