KeyframeEffect: KeyframeEffect()

Baseline

20203

KeyframeEffect() API KeyframeEffect

new KeyframeEffect(target, keyframes)
new KeyframeEffect(target, keyframes, options)
new KeyframeEffect(sourceKeyFrames)

DOM null

null

(normal) (reverse) (alternate) (alternate-reverse) "normal"

duration

0 0

easing

"linear", "ease-in", "step-end", "cubic-bezier(0.42, 0, 0.58, 1)" <easing-function> "linear"

endDelay

fill

("backwards") ("forwards") (both) "none"

iterationStart

0.5 2 3 0.0

iterations

1 Infinity

composite

replace

add transform translateX(-200px) rotate(20deg) translateX(-200px) rotate(20deg)
accumulate blur(2) blur(5) blur(7) blur(2) blur(5)
replace

iterationComposite

accumulate replace replace

pseudoElement

"::before" target target

KeyframeEffect

sourceKeyFrames: KeyframeEffect

KeyframeEffect

const emoji = document.querySelector("div"); // 

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // 
    { transform: "translateX(200px) rotate(1.3turn)" }, // 
  ],
  {
    // 
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

html

<div></div>

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}


Web Animations # dom-keyframeeffect-keyframeeffect

MDN

MDN 2026412

GitHub