Baseline Widely available
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.
new KeyframeEffect(target, keyframes)
new KeyframeEffect(target, keyframes, options)
new KeyframeEffect(sourceKeyFrames)
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") oder both. 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 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 würde bei transform, ein translateX(-200px) nicht einen früheren 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 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 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.
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();
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;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4