KeyframeEffect: KeyframeEffect() Konstruktor
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Der KeyframeEffect()
Konstruktor der Web Animations API gibt eine neue KeyframeEffect
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 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 enthält:
delay
Optional-
Die Anzahl der Millisekunden, um die der Start der Animation verzögert wird. Standardwert ist 0.
direction
Optional-
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"
. duration
Optional-
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.
easing
Optional-
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"
. endDelay
Optional-
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.
fill
Optional-
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"
. iterationStart
Optional-
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.
iterations
Optional-
Die Anzahl der Male, die die Animation wiederholt werden soll. Standardwert ist
1
und kann auch den WertInfinity
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 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.
iterationComposite
Optional-
Bestimmt, wie sich Werte von Iteration zu Iteration in dieser Animation aufbauen. Kann auf
accumulate
oderreplace
gesetzt werden (siehe oben). Standardwert istreplace
. pseudoElement
Optional-
Ein
string
, 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 vorhandenen KeyframeEffect
Objektinstanz. Sein Parameter ist wie folgt:
sourceKeyFrames
-
Ein
KeyframeEffect
Objekt, das Sie klonen möchten.
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>
Spezifikationen
Specification |
---|
Web Animations # dom-keyframeeffect-keyframeeffect |