<easing-function>

Der <easing-function> CSS Datentyp repräsentiert eine mathematische Funktion, die die Rate beschreibt, mit der sich ein Wert ändert.

Diese Transition zwischen zwei Werten kann in verschiedenen Situationen angewendet werden. Sie kann verwendet werden, um zu beschreiben, wie schnell sich Werte während Animationen ändern. Dadurch können Sie die Geschwindigkeit der Animation im Laufe ihrer Dauer variieren. Sie können eine easing-function für CSS-transition- und animation-Eigenschaften festlegen.

Syntax

/* Keyword linear easing function */
linear /* linear(0, 1) */
/* Custom linear easing functions */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
/* Keyword cubic Bézier easing functions */
ease /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in /* cubic-bezier(0.42, 0, 1, 1) */
ease-out /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out /* cubic-bezier(0.42, 0, 0.58, 1) */
/* Custom cubic Bézier easing function */
cubic-bezier(0.25, 0.1, 0.25, 1)
/* Keyword step easing functions */
step-start /* steps(1, jump-start) */
step-end /* steps(1, jump-end) */
/* Custom step easing functions */
steps(4, end)
steps(10, jump-both)

Werte

Eine <easing-function> kann einer der folgenden Typen sein:

<linear-easing-function>

Erstellt Transitionen, die mit einer konstanten Rate verlaufen. Diese Funktion kann auf folgende Weise angegeben werden:

linear

Gibt eine konstante Interpolationsrate an, ohne Änderung der Fortschrittsrate über die gesamte Dauer hinweg (d.h. keine Beschleunigung oder Verzögerung). Dieser Schlüsselwortwert entspricht linear(0, 1). Er kann auch als cubic-bezier(0, 0, 1, 1) dargestellt werden.

[画像:Diagramm des Eingabe- zum Ausgabe-Fortschritt, das eine Linie zeigt, die sich vom Ursprung bis (1, 1) erstreckt.]

Hinweis: Das Schlüsselwort linear wird immer als linear(0, 1) interpretiert, während die Funktion linear(0, 1) als linear(0 0%, 1 100%) interpretiert wird.

linear()

Definiert mehrere Fortschrittspunkte unter Verwendung von <number>-Werten mit optionalen <percentage>-Werten, um deren Timing zu steuern.

<cubic-bezier-easing-function>

Erstellt sanfte Transitionen mit variablen Änderungsraten. Diese Funktion kann auf folgende Weise angegeben werden:

ease

Repräsentiert die Easing-Funktion cubic-bezier(0.25, 0.1, 0.25, 1). Sie zeigt an, dass die Interpolation langsam beginnt, stark beschleunigt und dann allmählich gegen Ende verlangsamt. Sie ist ähnlich dem Schlüsselwort ease-in-out, beschleunigt jedoch am Anfang stärker.

ease-in

Repräsentiert die Easing-Funktion cubic-bezier(0.42, 0, 1, 1). Sie zeigt an, dass die Interpolation langsam beginnt und dann allmählich schneller wird, bis sie abrupt endet.

ease-out

Repräsentiert die Easing-Funktion cubic-bezier(0, 0, 0.58, 1). Sie zeigt an, dass die Interpolation abrupt beginnt und dann allmählich gegen Ende verlangsamt.

ease-in-out

Repräsentiert die Easing-Funktion cubic-bezier(0.42, 0, 0.58, 1). Sie zeigt an, dass die Interpolation langsam beginnt, schneller wird und gegen Ende wieder langsamer. Am Anfang verhält sie sich wie das Schlüsselwort ease-in; am Ende ist sie wie das Schlüsselwort ease-out.

[画像:Diagramme des Eingabe- zum Ausgabe-Fortschritt, wobei ease eine gekrümmte Linie zeigt, die schnell vom Ursprung zu (1, 1) ansteigt; ease-in zeigt eine flache gekrümmte Linie vom Ursprung, die sich beim Nähern an (1, 1) begradigt; ease-out zeigt eine gerade diagonale Linie, die sich leicht krümmt, wenn sie sich (1, 1) nähert; und ease-in-out zeigt eine symmetrische, S-förmige Linie, die vom Ursprung zu (1, 1) gekrümmt ist.]

cubic-bezier()

Definiert eine benutzerdefinierte Kurve unter Verwendung von vier <number>-Werten, die die Koordinaten von zwei Kontrollpunkten angeben. Die X-Koordinaten müssen im Bereich [0, 1] liegen.

<step-easing-function>

Erstellt stufenweise Transitionen, die die Animation in eine bestimmte Anzahl gleichlanger Intervalle unterteilen, wobei die Animation von einem Schritt zum nächsten springt, anstatt sanft zu übergehen. Diese Funktion kann auf folgende Weise angegeben werden:

step-start

Repräsentiert die Easing-Funktion steps(1, jump-start) oder steps(1, start). Sie zeigt an, dass die Interpolation sofort in ihren Endzustand springt, in dem sie bis zum Ende verbleibt.

step-end

Repräsentiert die Easing-Funktion steps(1, jump-end) oder steps(1, end). Sie zeigt an, dass die Interpolation in ihrem Anfangszustand verbleibt, bis sie direkt in ihren Endzustand springt.

[画像:Zwei Diagramme des Eingabe- zum Ausgabe-Fortschritt. Im step-start-Diagramm stellt ein nicht gefüllter Kreis den Ursprungspunkt (0, 0) dar, mit einer horizontalen Linie, die von (0, 1) bis (1, 1) verläuft. Im step-end-Diagramm verläuft eine horizontale Linie vom Ursprung bis (1, 0), mit einem nicht gefüllten Kreis bei (1,0) und einem gefüllten Kreis bei (1, 1).]

steps()

Erzeugt eine treppenartige Kurve unter Verwendung eines <integer>, um die Anzahl der Intervalle zu spezifizieren, sowie eines optionalen Schlüsselworts, um das Timing der Sprünge zu steuern.

Formale Syntax

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

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

Beispiele

Vergleich der Easing-Funktionen

Dieses Beispiel ermöglicht einen einfachen Vergleich der verschiedenen Easing-Funktionen mittels einer Animation. Über das Dropdown-Menü können Sie eine Easing-Funktion auswählen – es gibt ein paar Schlüsselwörter und einige cubic-bezier()- und steps()-Optionen. Nach der Auswahl einer Option können Sie die Animation mit dem bereitgestellten Button starten und stoppen.

HTML

<div>
 <div></div>
</div>
<ul>
 <li>
 <button class="animation-button">Start animation</button>
 </li>
 <li>
 <label for="easing-select">Choose an easing function:</label>
 <select id="easing-select">
 <option selected>linear</option>
 <option>linear(0, 0.5 50%, 1)</option>
 <option>ease</option>
 <option>ease-in</option>
 <option>ease-in-out</option>
 <option>ease-out</option>
 <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
 <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
 <option>steps(5, end)</option>
 <option>steps(3, start)</option>
 <option>steps(4)</option>
 </select>
 </li>
</ul>

CSS

body > div {
 position: relative;
 height: 100px;
}
div > div {
 position: absolute;
 width: 50px;
 height: 50px;
 background-color: blue;
 background-image: radial-gradient(
 circle at 10px 10px,
 rgb(25 255 255 / 80%),
 rgb(25 255 255 / 40%)
 );
 border-radius: 50%;
 top: 25px;
 animation: 1.5s infinite alternate;
}
@keyframes move-right {
 from {
 left: 10%;
 }
 to {
 left: 90%;
 }
}
li {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
}

JavaScript

const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");
startBtn.addEventListener("click", () => {
 if (startBtn.textContent === "Start animation") {
 divElem.style.animationName = "move-right";
 startBtn.textContent = "Stop animation";
 divElem.style.animationTimingFunction = selectElem.value;
 } else {
 divElem.style.animationName = "unset";
 startBtn.textContent = "Start animation";
 }
});
selectElem.addEventListener("change", () => {
 divElem.style.animationTimingFunction = selectElem.value;
});

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Easing-Funktionen Modul
• CSS-Animationen Modul
• CSS-Transitions Modul
• linear() Easing-Generator von Jake Archibald
• cubic-bezier.com von Lea Verou