<!DOCTYPE html><htmlclass="reftest-wait"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Animation with neutral keyframe is responsive to change in underlying style</title><linkrel="help"href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect"><linkrel="match"href="neutral-keyframe-ref.html"><scriptsrc="/common/reftest-wait.js"></script><scriptsrc="/web-animations/testcommon.js"></script><styletype="text/css">#block{background-color:green;height:100px;width:100px;}</style></head><body><divid="block"></div></body><script>window.onload=async()=>{consttarget=document.getElementById('block');constanim=target.animate({translate:'200px'},{duration:10000,easing:'steps(1,jump-end)'});awaitanim.ready;awaitwaitForNextFrame();// The neutral keyframe value changes from transform 'none' to '100px'.// Since using jump-end for the easing function, the animated value is the// underlying (neutral) value. If the box is not translated, then the change// to the underlying value is not taking effect.target.style.translate='100px';awaitwaitForNextFrame();takeScreenshot();};</script></html>