<easing-function>

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

<linear-easing-function>

Erstellt Übergänge, die mit einer konstanten Rate fortschreiten. Diese Funktion kann folgendermaßen angegeben werden:

linear

Bestimmt eine konstante Interpolationsrate ohne Änderung der Fortschrittsgeschwindigkeit während der gesamten Dauer (das heißt, keine Beschleunigung oder Verzögerung). Dieser Schlüsselwortwert ist äquivalent zu linear(0, 1). Er kann auch als cubic-bezier(0, 0, 1, 1) dargestellt werden.

Hinweis: Das linear-Schlüsselwort 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 Übergänge mit variablen Änderungsraten. Diese Funktion kann folgendermaßen 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, dann stark beschleunigt und gegen Ende allmählich langsamer wird. Sie ist dem Schlüsselwort ease-in-out ähnlich, beschleunigt jedoch zu Beginn stärker.

ease-in

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

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 bis zum Ende verlangsamt wird.

ease-in-out

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

cubic-bezier()

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

<step-easing-function>

Erstellt abgestufte Übergänge, die die Animation in eine festgelegte Anzahl gleichlanger Intervalle unterteilen, wodurch die Animation von einem Schritt zum nächsten springt, anstatt sanft zu wechseln. Diese Funktion kann folgendermaßen 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 wechselt, in dem sie bis zum Ende bleibt.

step-end

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

steps()

Erstellt eine treppenförmige Kurve unter Verwendung eines <integer> zur Angabe der Anzahl der Intervalle und eines optionalen Schlüsselworts zur Steuerung des Sprungtimings.

<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         

Dieses Beispiel bietet einen einfachen Vergleich zwischen den verschiedenen Easing-Funktionen mithilfe 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 der Auswahl einer Option können Sie die Animation mit der bereitgestellten Schaltfläche 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

• CSS-Animationen
• CSS-Übergänge
• cubic-bezier.com von Lea Verou (2011)
• linear() Easing-Generator von Jake Archibald