KeyframeEffect: KeyframeEffect() Konstruktor

Syntax

new KeyframeEffect(target, keyframes)
new KeyframeEffect(target, keyframes, options)
new KeyframeEffect(sourceKeyFrames)

Parameter

Der Mehrfachargument-Konstruktor (siehe oben) erstellt eine vllig 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 eine oder mehrere der folgenden Optionen enthlt:

delay Optional

Die Anzahl der Millisekunden, um die der Start der Animation verzgert wird. Standardwert ist 0.

direction Optional

Ob die Animation vorwrts (normal), rckwrts (reverse), nach jeder Iteration die Richtung wechselt (alternate) oder rckwrts luft und nach jeder Iteration die Richtung wechselt (alternate-reverse). Standardwert ist "normal".

duration Optional

Die Anzahl der Millisekunden, die jede Iteration der Animation bentigt, um vollstndig abzulaufen. Standardwert ist 0. Obwohl dies technisch optional ist, bedenken Sie, dass Ihre Animation nicht ausgefhrt wird, wenn dieser Wert 0 ist.

easing Optional

Die Rate der Vernderung der Animation im Laufe der Zeit. Akzeptiert eine <easing-function>, wie z.B. "linear", "ease-in", "step-end" oder "cubic-bezier(0.42, 0, 0.58, 1)". Standardwert ist "linear".

endDelay Optional

Die Anzahl der Millisekunden, die nach dem Ende einer Animation verzgert werden. Dies wird hauptschlich verwendet, wenn Animationen basierend auf der Endzeit einer anderen Animation sequenziert werden. Standardwert ist 0.

fill Optional

Bestimmt, ob die Effekte der Animation vor dem Abspielen durch das/die Element(e) reflektiert werden sollen ("backwards"), nach dem vollstndigen Abspielen der Animation beibehalten werden sollen ("forwards") oder both. Standardwert ist "none".

iterationStart Optional

Beschreibt, zu welchem Zeitpunkt in der Iteration die Animation beginnen soll. Zum Beispiel wrde 0,5 bedeuten, dass die Animation in der Mitte der ersten Iteration beginnt, und mit diesem Wert wrde eine Animation mit 2 Iterationen in der Mitte einer dritten Iteration enden. Standardwert ist 0,0.

iterations Optional

Die Anzahl der Male, die die Animation wiederholt werden soll. Standardwert ist 1 und kann auch den Wert Infinity annehmen, um sie so lange zu wiederholen, wie das Element existiert.

composite Optional

Bestimmt, wie Werte zwischen dieser Animation und anderen separaten Animationen, die keine eigene spezifische Kompositionsoperation angeben, kombiniert werden. Standardwert ist replace.

• add bestimmt einen additiven Effekt, bei dem jede aufeinanderfolgende Iteration auf der vorherigen aufbaut. Zum Beispiel wrde bei transform, ein translateX(-200px) nicht einen frheren Wert von rotate(20deg) berschreiben, sondern in einem translateX(-200px) rotate(20deg) resultieren.
• accumulate ist hnlich, aber etwas intelligenter: blur(2) und blur(5) werden zu blur(7), nicht zu blur(2) blur(5).
• replace berschreibt den vorherigen Wert mit dem Neuen.

iterationComposite Optional

Bestimmt, wie sich Werte von Iteration zu Iteration in dieser Animation aufbauen. Kann auf accumulate oder replace gesetzt werden (siehe oben). Standardwert ist replace.

pseudoElement Optional

Ein string, der einen pseudo-element Selektor enthlt, wie z.B. "::before". Wenn vorhanden, wird der Effekt auf das ausgewhlte Pseudo-Element von target angewendet, anstatt auf target selbst.

Der Einzelargument-Konstruktor (siehe oben) erstellt einen Klon einer vorhandenen KeyframeEffect Objektinstanz. Sein Parameter ist wie folgt:

sourceKeyFrames

Ein KeyframeEffect Objekt, das Sie klonen mchten.

Beispiele

Im folgenden Beispiel wird der KeyframeEffect Konstruktor verwendet, um eine Reihe von Keyframes zu erstellen, die bestimmen, wie das Emoji ber den 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;
}

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• KeyframeEffect Interface
• Web Animations API
• Animation