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);


  Hover to see
the transition.

#example-element {
  background-color: #e4f0f5;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

Dies ermöglicht es Ihnen im Wesentlichen, eine Beschleunigungskurve festzulegen, sodass die Geschwindigkeit des Übergangs über dessen Dauer variieren kann.

Diese Beschleunigungskurve wird mit einer für jede zu übertragene Eigenschaft definiert.

Sie können mehrere Übergangsfunktionen angeben; jede wird auf die entsprechende Eigenschaft angewendet, wie durch die transition-property Eigenschaft festgelegt, die als transition-property-Liste fungiert. Wenn weniger Übergangsfunktionen angegeben sind als in der transition-property-Liste, muss der Benutzeragent berechnen, welcher Wert verwendet wird, indem die Liste der Werte wiederholt wird, bis es für jede Übergangseigenschaft einen gibt. Wenn es mehr Übergangsfunktionen gibt, wird die Liste auf die richtige Größe gekürzt. In beiden Fällen bleibt die CSS-Deklaration gültig.

Syntax

css

/* 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

Jede stellt die Übergangsfunktion dar, die mit der entsprechenden zu übertragenden Eigenschaft verknüpft ist, wie in transition-property definiert.

Die Nicht-Schritt-Schlüsselwortwerte (ease, linear, ease-in-out, etc.) repräsentieren jeweils eine kubische Bézier-Kurve mit festgelegten vier Punktwerten, wobei der Wert der Funktion cubic-bezier() eine nicht vordefinierte Kurve ermöglicht. Die Schritte der Übergangsfunktionen teilen die Eingabezeit in eine bestimmte Anzahl von Intervallen gleicher Länge. Sie wird durch eine Anzahl von Schritten und eine Sprungposition definiert.

ease

Entspricht cubic-bezier(0.25, 0.1, 0.25, 1.0), der Standardwert, erhöht die Geschwindigkeit in der Mitte des Übergangs, verlangsamt sich am Ende wieder.

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 zunimmt, bis abgeschlossen.

ease-out

Entspricht cubic-bezier(0, 0, 0.58, 1.0), beginnt schnell zu wechseln und verlangsamt sich dann.

ease-in-out

Entspricht cubic-bezier(0.42, 0, 0.58, 1.0), beginnt langsam, beschleunigt und verlangsamt dann wieder.

cubic-bezier(p1, p2, p3, p4)

Eine vom Autor definierte kubische Bézier-Kurve, wobei die p1 und p3 Werte im Bereich von 0 bis 1 liegen müssen.

steps(n, )

Zeigt den Übergang entlang von n Haltepunkten im Übergang, wobei jeder Haltepunkt für gleiche Zeitlängen angezeigt wird. Wenn n beispielsweise 5 ist, gibt es 5 Schritte. Ob der Übergang vorübergehend bei 0%, 20%, 40%, 60% und 80% anhält, auf 20%, 40%, 60%, 80% und 100%, oder 5 Haltepunkte zwischen den 0% und 100% macht, oder 5 Haltepunkte einschließlich der 0% und 100% Marken (bei 0%, 25%, 50%, 75% und 100%) hängt davon ab, welcher der folgenden Sprungbegriffe verwendet wird:

jump-start: Bezeichnet eine linksstetige Funktion, sodass der erste Sprung beim Start des Übergangs erfolgt;
jump-end: Bezeichnet eine rechtsstetige Funktion, sodass der letzte Sprung erfolgt, wenn die Animation endet;
jump-none: Es gibt keinen Sprung an einem der Enden. Anstelle dessen wird jeweils bei der 0% und 100% Marke gehalten, jeweils für 1/n der Dauer
jump-both: Beinhaltet Pausen sowohl bei der 0% als auch 100% Marke, was effektiv einen Schritt während der Übergangszeit hinzufügt.
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 hilfreich sein, um Benutzerführungen anzubieten, Beziehungen innerhalb der Benutzeroberfläche zu zeigen und Benutzer darüber zu informieren, welche Aktionen stattgefunden haben. Animationen können helfen, die kognitive Belastung zu reduzieren, Change Blindness zu verhindern und ein besseres Gedächtnis für räumliche Beziehungen zu schaffen. Einige Animationen können jedoch problematisch für Personen mit kognitiven Bedenken sein, wie z.B. Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS), und bestimmte Arten von Bewegungen können Auslöser für vestibuläre Störungen, Epilepsie, Migräne und Photophobie sein.

Erwägen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen, sowie die Verwendung der Abfrage für reduzierte Bewegung (oder ein entsprechendes User Agent Client Hint Sec-CH-Prefers-Reduced-Motion) um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für weniger Animationen angegeben 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 = 
  #  

 = 
          |
    |
            

 = 
  linear      |
    

 = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
    

 = 
  step-start  |
  step-end    |
     

 = 
  linear( [  && {0,2} ]# )  

 = 
  cubic-bezier( [  ,  ]#{2} )  

 = 
  steps(  , ? )  

 = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

Beispiele

Cubic-Bezier Beispiele


  ease
  ease-in
  ease-out
  ease-in-out
  linear
  cubic-bezier(0.2,-2,0.8,2)

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

css

.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);
}

Step Beispiele


  jump-start
  jump-end
  jump-both
  jump-none
  step-start
  step-end

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

css

.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