DerKeyframeEffect() Konstruktor derWeb Animations API gibt eine neueKeyframeEffect Objektinstanz zurück und ermöglicht es Ihnen auch, eine vorhandene Keyframe-Effekt-Objektinstanz zu klonen.

Syntax

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

Parameter

Der Mehrfachargument-Konstruktor (siehe oben) erstellt eine völlig neueKeyframeEffect Objektinstanz. Seine Parameter sind:

target

Das zu animierende DOM-Element odernull.

keyframes

EinKeyframes-Objekt odernull.

optionsOptional

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

delayOptional

Die Anzahl der Millisekunden, um die der Start der Animation verzögert wird. Standardwert ist 0.

directionOptional

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

durationOptional

Die Anzahl der Millisekunden, die jede Iteration der Animation benötigt, um vollständig abzulaufen. Standardwert ist 0. Obwohl dies technisch optional ist, bedenken Sie, dass Ihre Animation nicht ausgeführt wird, wenn dieser Wert 0 ist.

easingOptional

Die Rate der Veränderung 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".

endDelayOptional

Die Anzahl der Millisekunden, die nach dem Ende einer Animation verzögert werden. Dies wird hauptsächlich verwendet, wenn Animationen basierend auf der Endzeit einer anderen Animation sequenziert werden. Standardwert ist 0.

fillOptional

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

iterationStartOptional

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

iterationsOptional

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

compositeOptional

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

• add bestimmt einen additiven Effekt, bei dem jede aufeinanderfolgende Iteration auf der vorherigen aufbaut. Zum Beispiel würde beitransform, eintranslateX(-200px) nicht einen früheren Wert vonrotate(20deg) überschreiben, sondern in einemtranslateX(-200px) rotate(20deg) resultieren.
• accumulate ist ähnlich, aber etwas intelligenter:blur(2) undblur(5) werden zublur(7), nicht zublur(2) blur(5).
• replace überschreibt den vorherigen Wert mit dem Neuen.

iterationCompositeOptional

Bestimmt, wie sich Werte von Iteration zu Iteration in dieser Animation aufbauen. Kann aufaccumulate oderreplace gesetzt werden (siehe oben). Standardwert istreplace.

pseudoElementOptional

Einstring, der einenpseudo-element Selektor enthält, wie z.B."::before". Wenn vorhanden, wird der Effekt auf das ausgewählte Pseudo-Element vontarget angewendet, anstatt auftarget selbst.

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

sourceKeyFrames

EinKeyframeEffect Objekt, das Sie klonen möchten.

Beispiele

Im folgenden Beispiel wird derKeyframeEffect 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 animateconst 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-Kompatibilität

Siehe auch

• KeyframeEffect Interface
• Web Animations API
• Animation