`transition-timing-function` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft transition-timing-function legt fest, wie Zwischenwerte für CSS-Eigenschaften berechnet werden, die von einem Übergangseffekt beeinflusst werden.

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

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

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

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

Damit können Sie im Wesentlichen eine Beschleunigungskurve festlegen, sodass die Geschwindigkeit des Übergangs über dessen Dauer variieren kann.

Diese Beschleunigungskurve wird mithilfe einer <easing-function> für jede zu überblendende Eigenschaft definiert.

Sie können mehrere Easing-Funktionen angeben; jede wird auf die entsprechende Eigenschaft angewendet, wie durch die Eigenschaft transition-property festgelegt, die als transition-property-Liste fungiert. Wenn weniger Easing-Funktionen angegeben sind als Einträge in der transition-property-Liste, muss der User Agent ermitteln, welcher Wert verwendet wird, indem die Werteliste wiederholt wird, bis für jede Übergangseigenschaft ein Wert vorhanden ist. Wenn mehr Easing-Funktionen vorhanden sind, wird die Liste auf die richtige Größe rechts abgeschnitten. 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

<easing-function>

Jede <easing-function> stellt die Easing-Funktion dar, die mit der entsprechenden zu überblendenden Eigenschaft verknüpft wird, wie in transition-property definiert.

Die Nicht-Schritt-Schlüsselwortwerte (ease, linear, ease-in-out usw.) stehen jeweils für eine kubische Bézier-Kurve mit festen Werten für vier Punkte, wobei der Funktionswert cubic-bezier() einen nicht vordefinierten Wert ermöglicht. Die Schritt-Easing-Funktionen teilen die Eingabezeit in eine angegebene Anzahl gleich langer Intervalle auf. Sie werden durch eine Anzahl von Schritten und eine Schrittposition definiert.

ease

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

linear

Entspricht cubic-bezier(0.0, 0.0, 1.0, 1.0) und führt den Übergang mit gleichmäßiger Geschwindigkeit aus.

ease-in

Entspricht cubic-bezier(0.42, 0, 1.0, 1.0), beginnt langsam, wobei die Übergangsgeschwindigkeit bis zum Abschluss zunimmt.

ease-out

Entspricht cubic-bezier(0, 0, 0.58, 1.0), beginnt den Übergang schnell und verlangsamt sich mit fortschreitendem Übergang.

ease-in-out

Entspricht cubic-bezier(0.42, 0, 0.58, 1.0), beginnt den Übergang langsam, beschleunigt und verlangsamt sich anschließend wieder.

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

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

steps(n, <jump-term>)

Zeigt den Übergang entlang von _n Haltepunkten während des Übergangs an, wobei jeder Haltepunkt für gleich lange Zeit angezeigt wird. Wenn n beispielsweise 5 ist, gibt es 5 Schritte. Ob der Übergang vorübergehend bei 0 %, 20 %, 40 %, 60 % und 80 % hält, bei 20 %, 40 %, 60 %, 80 % und 100 % hält, 5 Haltepunkte zwischen 0 % und 100 % des Übergangs macht oder 5 Haltepunkte einschließlich der Marken bei 0 % und 100 % macht (bei 0 %, 25 %, 50 %, 75 % und 100 %), hängt davon ab, welcher der folgenden Jump-Terms verwendet wird:

jump-start: Bezeichnet eine linksstetige Funktion, sodass der erste Sprung erfolgt, wenn der Übergang beginnt;
jump-end: Bezeichnet eine rechtsstetige Funktion, sodass der letzte Sprung erfolgt, wenn die Animation endet;
jump-none: An keinem Ende erfolgt ein Sprung. Stattdessen wird sowohl an der 0-%-Marke als auch an der 100-%-Marke jeweils für 1/n der Dauer gehalten.
jump-both: Beinhaltet Pausen sowohl an der 0-%- als auch an der 100-%-Marke und fügt dadurch effektiv einen Schritt während der Übergangszeit hinzu.
start: Entspricht jump-start.
end: Entspricht jump-end.

step-start

Entspricht steps(1, jump-start)

step-end

Entspricht steps(1, jump-end)

Barrierefreiheit

Einige Animationen können hilfreich sein, beispielsweise um Nutzern zu verdeutlichen, welche Aktionen erwartet werden, Beziehungen innerhalb der Benutzeroberfläche darzustellen und Nutzer darüber zu informieren, welche Aktionen stattgefunden haben. Animationen können dazu beitragen, die kognitive Belastung zu reduzieren, Veränderungsblindheit zu verhindern und ein besseres Erinnern räumlicher Beziehungen zu ermöglichen. Einige Animationen können jedoch für Menschen mit kognitiven Beeinträchtigungen wie einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) problematisch sein. Bestimmte Arten von Bewegung können außerdem vestibuläre Störungen, Epilepsie, Migräne und skotopische Sensitivität auslösen.

Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren von Animationen bereitzustellen, und verwenden Sie außerdem die Reduced-Motion-Media-Query (oder den entsprechenden User-Agent-Client-Hint Sec-CH-Prefers-Reduced-Motion), um Nutzern, die eine Präferenz für weniger Animationen angegeben haben, eine ergänzende Erfahrung zu bieten.

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 = 
  <easing-function>#  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<integer> = 
  <number-token>  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

Beispiele

Beispiele für kubische Bézier-Kurven

<div class="parent">
  <div class="ease">ease</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>

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

Schrittbeispiele

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

.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

Spezifikation
CSS Transitions Module Level 1 # transition-timing-function-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

transition-timing-function CSS property

Help improve MDN

`transition-timing-function` CSS property