<easing-function>

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 von einem der folgenden Typen sein:

<linear-easing-function>

Erzeugt Übergänge, die mit einer konstanten Rate fortschreiten. Diese Funktion kann mit einer der folgenden Angaben spezifiziert werden:

linear

Gibt eine konstante Interpolationsrate an, ohne Änderung der Fortschrittsrate im Verlauf der Dauer (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.

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 mithilfe von <number> Werten, mit optionalen <percentage> Werten zur Kontrolle ihrer zeitlichen Abstimmung.

<cubic-bezier-easing-function>

Erzeugt sanfte Übergänge mit variablen Änderungsraten. Diese Funktion kann mit einer der folgenden Angaben spezifiziert werden:

ease

Repräsentiert die Easingfunktion cubic-bezier(0.25, 0.1, 0.25, 1). Sie zeigt an, dass die Interpolation langsam beginnt, stark beschleunigt und dann allmählich zum Ende hin langsamer wird. Sie ist ähnlich dem Schlüsselwort ease-in-out, beschleunigt jedoch zu Beginn stärker.

ease-in

Repräsentiert die Easingfunktion cubic-bezier(0.42, 0, 1, 1). Sie zeigt an, dass die Interpolation langsam beginnt, dann allmählich schneller wird, bis zum Ende, wo sie abrupt stoppt.

ease-out

Repräsentiert die Easingfunktion cubic-bezier(0, 0, 0.58, 1). Sie zeigt an, dass die Interpolation abrupt beginnt und dann allmählich zum Ende hin langsamer wird.

ease-in-out

Repräsentiert die Easingfunktion cubic-bezier(0.42, 0, 0.58, 1). Sie zeigt an, dass die Interpolation langsam beginnt, beschleunigt und dann zum Ende hin langsamer wird. Am Anfang verhält sie sich wie das Schlüsselwort ease-in; am Ende ist es wie das Schlüsselwort ease-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>

Erzeugt gestufte Übergänge, die die Animation in eine bestimmte Anzahl von gleich langen Intervallen unterteilt, wodurch die Animation von einem Schritt zum nächsten springt anstatt sanft zu übergehen. Diese Funktion kann mit einer der folgenden Angaben spezifiziert werden:

step-start

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

step-end

Repräsentiert die Easingfunktion steps(1, jump-end) oder steps(1, end). Sie zeigt an, dass die Interpolation in ihrem Anfangszustand bleibt, bis sie am Ende direkt zu ihrem Endzustand springt.

steps()

Erzeugt eine treppenartige Kurve, indem ein <integer> verwendet wird, um die Anzahl der Intervalle anzugeben, und ein optionales Schlüsselwort zur Steuerung des Zeitpunkts der Sprünge.

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 bietet einen einfachen Vergleich zwischen den verschiedenen Easing-Funktionen mit einer Animation. Im Dropdown-Menü können Sie eine Easing-Funktion auswählen – es gibt ein paar Schlüsselwörter sowie einige cubic-bezier() und steps() Optionen. Nach Auswahl einer Option können Sie die Animation mit dem bereitgestellten Knopf 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 functions Modul
• CSS animations Modul
• CSS transitions Modul
• linear() easing generator von Jake Archibald
• cubic-bezier.com von Lea Verou