KeyframeEffect: target property

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The target property of a KeyframeEffect interface represents the element or pseudo-element being animated. It may be null for animations that do not target a specific element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

Value

An Element or null.

Examples

In the Follow the White Rabbit example, whiteRabbit sets the target element to be animated:

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

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

// returns <div id="rabbit">Click the rabbit's ears!</div>
rabbitDownKeyframes.target;

Specifications

Specification
Web Animations
# dom-keyframeeffect-target

Browser compatibility

BCD tables only load in the browser

See also