KeyframeEffect: target-Eigenschaft

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.

Die target-Eigenschaft des KeyframeEffect-Interfaces repräsentiert das Element oder Pseudo-Element, das animiert wird. Sie kann null sein für Animationen, die kein spezifisches Element anvisieren. Sie fungiert sowohl als Getter als auch als Setter, außer bei Animationen und Übergängen, die durch CSS generiert werden.

Wert

Ein Element oder null.

Beispiele

Im folgenden Beispiel wurde emoji als target-Element gesetzt, das animiert werden 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);
rollingAnimation.play();

// logs "<div>🤣</div>"
console.log(rollingKeyframes.target);

html

<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

Spezifikation
Web Animations # dom-keyframeeffect-target

Browser-Kompatibilität

Siehe auch

Web Animations API
Eigenschaft von KeyframeEffect-Objekten.

Help improve MDN

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

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