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.
On this page
KeyframeEffect: target property
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
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 | 13.1 | 75 | 75 | 63 | 54 | 13.4 | 11.0 |
See also
- Web Animations API
- Property of
KeyframeEffect
objects.
© 2005–2023 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