KeyframeEffect.target

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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 63Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

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