Animation: Animation()-Konstruktor

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.

Der Animation()-Konstruktor der Web Animations API gibt eine neue Animation-Objektinstanz zurück.

In diesem Artikel

Der Ziel-Effekt, als ein Objekt basierend auf der AnimationEffect-Schnittstelle, das der Animation zugewiesen werden soll. Obwohl in Zukunft andere Effekte wie SequenceEffects oder GroupEffects möglich sein könnten, ist der einzige derzeit verfügbare Effekt KeyframeEffect. Dies kann null sein (was der Standardwert ist), um anzugeben, dass kein Effekt angewendet werden soll.

timeline Optional

Gibt die timeline an, mit der die Animation assoziiert werden soll, als ein Objekt eines Typs basierend auf der AnimationTimeline-Schnittstelle. Der Standardwert ist Document.timeline, aber dies kann auch auf null gesetzt werden.

Beispiele

Im Follow the White Rabbit-Beispiel können wir den Animation()-Konstruktor verwenden, um eine Animation für die rabbitDownKeyframes unter Verwendung der timeline des Dokuments zu erstellen:

js
const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
  { duration: 3000, fill: "forwards" },
);

const rabbitDownAnimation = new Animation(rabbitDownKeyframes);

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
Animation
Konstruktor
1. Animation()
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
1. EventTarget
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

Animation: Animation()-Konstruktor

In diesem Artikel

Syntax

Parameter

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN