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();

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