<easing-function>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Der <easing-function>
CSS Datentyp repräsentiert eine mathematische Funktion, die die Rate beschreibt, mit der ein Wert sich ändert.
Dieser Übergang zwischen zwei Werten kann in verschiedenen Situationen angewendet werden. Er 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-Funktion für die CSS-Attribute transition und animation 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 Übergänge, die mit einer konstanten Rate verlaufen. Diese Funktion kann wie folgt angegeben werden:
linear
-
Gibt eine konstante Interpolationsrate an, ohne Änderungen in der Progressionsrate während der Dauer (d. h. keine Beschleunigung oder Verzögerung). Dieser Schlüsselwortwert entspricht
linear(0, 1)
. Er kann auch alscubic-bezier(0, 0, 1, 1)
dargestellt werden.Hinweis: Das Schlüsselwort
linear
wird immer alslinear(0, 1)
interpretiert, während die Funktionlinear(0, 1)
alslinear(0 0%, 1 100%)
interpretiert wird. linear()
-
Definiert mehrere Fortschrittspunkte mit
<number>
-Werten und optionalen<percentage>
-Werten, um deren Timing zu steuern.
<cubic-bezier-easing-function>
-
Erstellt glatte Übergänge mit variablen Änderungsraten. Diese Funktion kann wie folgt angegeben werden:
ease
-
Repräsentiert die Easing-Funktion
cubic-bezier(0.25, 0.1, 0.25, 1)
. Sie gibt an, dass die Interpolation langsam beginnt, stark beschleunigt und dann allmählich gegen Ende langsamer wird. Sie ähnelt dem Schlüsselwortease-in-out
, beschleunigt jedoch am Anfang stärker. ease-in
-
Repräsentiert die Easing-Funktion
cubic-bezier(0.42, 0, 1, 1)
. Sie gibt an, dass die Interpolation langsam beginnt, dann allmählich beschleunigt und am Ende abrupt stoppt. ease-out
-
Repräsentiert die Easing-Funktion
cubic-bezier(0, 0, 0.58, 1)
. Sie gibt an, dass die Interpolation abrupt beginnt und dann allmählich gegen Ende langsamer wird. ease-in-out
-
Repräsentiert die Easing-Funktion
cubic-bezier(0.42, 0, 0.58, 1)
. Sie gibt an, dass die Interpolation langsam beginnt, beschleunigt und dann gegen Ende langsamer wird. Zu Beginn verhält sie sich wie das Schlüsselwortease-in
; am Ende ähnlich wieease-out
. cubic-bezier()
-
Definiert eine benutzerdefinierte Kurve mit vier
<number>
-Werten, die die Koordinaten von zwei Kontrollpunkten spezifizieren. Die x-Koordinaten müssen im Bereich[0, 1]
liegen.
<step-easing-function>
-
Erstellt gestufte Übergänge, indem die Animation in eine festgelegte Anzahl von Intervallen mit gleicher Länge unterteilt wird, sodass die Animation springend statt reibungslos übergeht. Diese Funktion kann wie folgt angegeben werden:
step-start
-
Repräsentiert die Easing-Funktion
steps(1, jump-start)
odersteps(1, start)
. Sie gibt an, dass die Interpolation sofort in ihren Endzustand springt, wo sie bis zum Ende bleibt. step-end
-
Repräsentiert die Easing-Funktion
steps(1, jump-end)
odersteps(1, end)
. Sie gibt an, dass die Interpolation bis zum Ende in ihrem Ausgangszustand bleibt und dann direkt in ihren Endzustand springt. steps()
-
Erstellt eine stufenförmige Kurve mit einem
<integer>
, das die Anzahl der Intervalle angibt, und einem optionalen Schlüsselwort zur Steuerung des Sprungtimings.
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 erlaubt einen einfachen Vergleich zwischen den verschiedenen Easing-Funktionen mit einer Animation. Im Dropdown-Menü können Sie eine Easing-Funktion auswählen – es gibt einige Schlüsselwörter und Optionen für cubic-bezier()
und steps()
. Nachdem Sie eine Option ausgewählt haben, 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
Specification |
---|
CSS Easing Functions Level 1 # easing-functions |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<easing-function> | ||||||||||||
cubic-bezier() | ||||||||||||
linear() | ||||||||||||
steps() with start , end or no direction | ||||||||||||
jump- keywords for steps() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
Siehe auch
- CSS-Animationen
- CSS-Übergänge
- cubic-bezier.com von Lea Verou (2011)
linear()
Easing-Generator von Jake Archibald