KeyframeEffect - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

KeyframeEffect

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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.

AnimationEffect KeyframeEffect

In diesem Artikel

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:

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

html

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;
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Animations API
KeyframeEffect
Konstruktor
1. KeyframeEffect()
Instanzeigenschaften
Instanzmethoden
1. getKeyframes()
2. setKeyframes()
Vererbung
1. AnimationEffect
Verwandte Seiten für Web Animations
Anleitungen
1. Verwendung der Web Animations API
2. Konzepte der Web Animations API
3. Keyframe-Formate
4. Web Animation API Tipps und Tricks