KeyframeEffectReadOnly.target

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

The target property of a KeyframeEffectReadOnly or 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.

Note: For KeyframeEffect, this property is both a getter and a setter. For KeyframeEffectReadOnly, it is read-only.

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

Specification Status Comment
Web Animations
The definition of 'keyframeEffect' in that specification.
Working Draft Editor's draft.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No No No No ?

See also

Document Tags and Contributors

 Contributors to this page: fscholz, birtles, rachelnabors, chrisdavidmills
 Last updated by: fscholz,