DieKeyframeEffect-Schnittstelle derWeb Animations API ermöglicht es uns, Sätze von animierbaren Eigenschaften und Werten zu erstellen, die alsKeyframes bezeichnet werden. Diese können dann mit demAnimation()-Konstruktor abgespielt werden.

Konstruktor

KeyframeEffect()

Gibt eine neueKeyframeEffect-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 kannnull 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 kannnull 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 derKeyframeEffect-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 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);// play rofl animationrollingAnimation.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