KeyframeEffect.target

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Syntax

var targetElement = document.getElementById("elementToAnimate");

var keyframes = new KeyframeEffect( targetElement, keyframeBlock, timingOptions );

// returns #elementToAnimate
keyframes.target;

// assigns keyframes a new target
keyframes.target = newTargetElement;

Value

An Element, CSSPseudoElement, or null.

Examples

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

var whiteRabbit = document.getElementById("rabbit");

var 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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
target
75
79
63
No
62
No
75
75
63
54
No
11.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/target