KeyframeEffect

Konstruktor

KeyframeEffect()

Gibt eine neue KeyframeEffect-Objektinstanz zurck und ermglicht 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 fr 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 fr Animationen, die kein Pseudo-Element anvisieren.

KeyframeEffect.iterationComposite

Ruft die Iterationskompositionsoperation ab und setzt sie zur Auflsung der Eigenschaftswertnderungen dieses Keyframe-Effekts.

KeyframeEffect.composite

Ruft die Kompositionsoperation-Eigenschaft ab und setzt sie zur Auflsung der Eigenschaftswertnderungen 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 fr diesen Keyframe-Effekt zurck.

KeyframeEffect.getKeyframes()

Gibt die berechneten Keyframes zurck, die diesen Effekt ausmachen, zusammen mit deren berechneten Keyframe-Verschiebungen.

AnimationEffect.getTiming()

Gibt das mit der Animation verknpfte Objekt zurck, das alle Timing-Werte der Animation enthlt.

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-Kompatibilitt

Siehe auch

• Web Animations API
• Animation