KeyframeEffect: target property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
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.