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 following example, emoji
has been set as the target
element to be animated:
js
const emoji = document.querySelector("div"); // element to animate
const rollingKeyframes = new KeyframeEffect(
emoji,
[
{ transform: "translateX(0) rotate(0)" }, // keyframe
{ transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
],
{
// keyframe options
duration: 2000,
direction: "alternate",
easing: "ease-in-out",
iterations: "Infinity",
},
);
const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();
// logs "<div>🤣</div>"
console.log(rollingKeyframes.target);
html
<div>🤣</div>
Specifications
Specification |
---|
Web Animations # dom-keyframeeffect-target |
Browser compatibility
BCD tables only load in the browser
See also
- Web Animations API
- Property of
KeyframeEffect
objects.