KeyframeEffect

Die KeyframeEffect-Schnittstelle der Web Animations API ermöglicht es uns, Sätze von animierbaren Eigenschaften und Werten zu erstellen, die als Keyframes bezeichnet werden. Diese können dann mit dem Animation()-Konstruktor abgespielt werden.

Konstruktor

KeyframeEffect()

Gibt eine neue KeyframeEffect-Objektinstanz zurück und ermöglicht es auch, eine bestehende Keyframe-Effekt-Objektinstanz zu klonen.

Instanz-Eigenschaften

KeyframeEffect.target

Ruft das Element ab und setzt es, oder das Ursprungselement des Pseudo-Elements, das von diesem Objekt animiert wird. Dies kann null sein für Animationen, die kein bestimmtes Element oder Pseudo-Element anvisieren.

KeyframeEffect.pseudoElement

Ruft den Selektor des Pseudo-Elements ab und setzt ihn, das von diesem Objekt animiert wird. Dies kann null sein für Animationen, die kein Pseudo-Element anvisieren.

KeyframeEffect.iterationComposite

Ruft die Iterationskompositionsoperation ab und setzt sie zur Auflösung der Eigenschaftswertänderungen dieses Keyframe-Effekts.

KeyframeEffect.composite

Ruft die Kompositionsoperation-Eigenschaft ab und setzt sie zur Auflösung der Eigenschaftswertänderungen zwischen diesem und anderen Keyframe-Effekten.

Instanz-Methoden

Diese Schnittstelle erbt einige ihrer Methoden von ihrem Elternelement, AnimationEffect.

AnimationEffect.getComputedTiming()

Gibt die berechneten, aktuellen Timing-Werte für diesen Keyframe-Effekt zurück.

KeyframeEffect.getKeyframes()

Gibt die berechneten Keyframes zurück, die diesen Effekt ausmachen, zusammen mit deren berechneten Keyframe-Verschiebungen.

AnimationEffect.getTiming()

Gibt das mit der Animation verknüpfte Objekt zurück, das alle Timing-Werte der Animation enthält.

KeyframeEffect.setKeyframes()

Ersetzt die Menge der Keyframes, die diesen Effekt ausmachen.

AnimationEffect.updateTiming()

Aktualisiert die angegebenen Timing-Eigenschaften.

Beispiele

Im folgenden Beispiel wird der KeyframeEffect-Konstruktor verwendet, um eine Reihe von Keyframes zu erstellen, die diktieren, wie das Rofl-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);
// play rofl animation
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

• Web Animations API
• Animation