KeyframeEffect: KeyframeEffect() Konstruktor

Der Mehrfach-Argument Konstruktor (siehe oben) erstellt eine völlig neue KeyframeEffect Objektinstanz. Seine Parameter sind:

target

Das zu animierende DOM-Element oder null.

keyframes

Ein Keyframes-Objekt oder null.

options Optional

Entweder eine Ganzzahl, die die Dauer der Animation (in Millisekunden) darstellt, oder ein Objekt, das eines oder mehrere der folgenden enthält:

delay Optional

Die Anzahl der Millisekunden, die der Start der Animation verzögert wird. Standardmäßig 0.

direction Optional

Ob die Animation vorwärts (normal), rückwärts (reverse), die Richtung nach jeder Iteration umschaltet (alternate) oder rückwärts läuft und nach jeder Iteration die Richtung wechselt (alternate-reverse). Standardmäßig "normal".

duration Optional

Die Anzahl der Millisekunden, die jede Iteration der Animation zur Vollendung benötigt. Standardmäßig 0. Obwohl dies technisch optional ist, bedenken Sie, dass Ihre Animation nicht läuft, wenn dieser Wert 0 ist.

easing Optional

Die Rate der Veränderung der Animation über die Zeit. Akzeptiert eine <easing-function>, wie z. B. "linear", "ease-in", "step-end" oder "cubic-bezier(0.42, 0, 0.58, 1)". Standardmäßig "linear".

endDelay Optional

Die Anzahl der Millisekunden, die nach dem Ende einer Animation verzögert werden sollen. Dies ist hauptsächlich nützlich, wenn Animationen basierend auf der Endzeit einer anderen Animation sequenziert werden. Standardmäßig 0.

fill Optional

Bestimmt, ob die Effekte der Animation vor dem Abspielen durch das/die Element(e) reflektiert werden sollen ("backwards"), nach dem Ende der Animation beibehalten werden ("forwards") oder beide. Standardmäßig "none".

iterationStart Optional

Beschreibt, an welchem Punkt in der Iteration die Animation beginnen soll. 0,5 würde bedeuten, zur Hälfte der ersten Iteration zu starten, und mit diesem Wert würde eine Animation mit 2 Iterationen zur Hälfte einer dritten Iteration enden. Standardmäßig 0,0.

iterations Optional

Die Anzahl der Wiederholungen der Animation. Standardmäßig 1, kann aber auch den Wert Infinity annehmen, um sie so lange wie das Element existiert zu wiederholen.

composite Optional

Bestimmt, wie Werte zwischen dieser Animation und anderen, separaten Animationen kombiniert werden, die keinen eigenen spezifischen Kompositionsvorgang spezifizieren. Standardmäßig replace.

• add bestimmt einen additiven Effekt, bei dem jede nachfolgende Iteration auf der letzten aufbaut. Zum Beispiel würde bei transform ein translateX(-200px) einen früheren rotate(20deg) Wert nicht überschreiben, sondern ergeben translateX(-200px) rotate(20deg).
• accumulate ist ähnlich, aber etwas intelligenter: blur(2) und blur(5) werden zu blur(7), nicht blur(2) blur(5).
• replace überschreibt den vorherigen Wert mit dem neuen.

iterationComposite Optional

Bestimmt, wie Werte von Iteration zu Iteration in dieser Animation aufgebaut werden. Kann auf accumulate oder replace gesetzt werden (siehe oben). Standardmäßig replace.

pseudoElement Optional

Ein string, der einen Pseudo-Element-Selektor enthält, wie z. B. "::before". Wenn vorhanden, wird der Effekt auf das ausgewählte Pseudo-Element von target angewendet, anstatt auf target selbst.

Der Einzel-Argument Konstruktor (siehe oben) erstellt eine Kopie einer bestehenden KeyframeEffect Objektinstanz. Sein Parameter ist:

sourceKeyFrames

Ein KeyframeEffect Objekt, das Sie klonen möchten.

Im folgenden Beispiel wird der KeyframeEffect-Konstruktor verwendet, um eine Reihe von Keyframes zu erstellen, die bestimmen, wie der Emoji auf dem Boden rollen soll:

const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

<div>🤣</div>

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}

• KeyframeEffect-Schnittstelle
• Web Animations API
• Animation