<easing-function>

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

<linear-easing-function>

Erstellt Übergänge, die mit einer konstanten Rate fortschreiten. Diese Funktion kann wie folgt spezifiziert werden:

linear

Bestimmt eine konstante Interpolationsrate, ohne Änderung der Fortschrittsrate während 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 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 mit <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 wie folgt spezifiziert werden:

ease

Repräsentiert die easing function 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 ease-in-out Schlüsselwort, beschleunigt jedoch stärker zu Beginn.

ease-in

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

ease-out

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

ease-in-out

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

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 gestufte Übergänge, die die Animation in eine festgelegte Anzahl von gleich langen Intervallen unterteilen, sodass die Animation von einem Schritt zum nächsten springt, anstatt sanft zu übergehen. Diese Funktion kann wie folgt spezifiziert werden:

step-start

Repräsentiert die easing function steps(1, jump-start) oder steps(1, start). Sie zeigt an, dass die Interpolation sofort zu ihrem Endzustand springt, wo sie bis zum Ende bleibt.

step-end

Repräsentiert die easing function steps(1, jump-end) oder steps(1, end). Sie zeigt an, dass die Interpolation sich bis zum Ende in ihrem Anfangszustand befindet, wo sie direkt zu ihrem Endzustand springt.

steps()

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

<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. Über das 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 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

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