neutral-keyframe.html (1478B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Animation with neutral keyframe is responsive to change in underlying style</title> 7 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect"> 8 <link rel="match" href="neutral-keyframe-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <script src="/web-animations/testcommon.js"></script> 11 <style type="text/css"> 12 #block { 13 background-color: green; 14 height: 100px; 15 width: 100px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="block"></div> 21 </body> 22 <script> 23 window.onload = async () => { 24 const target = document.getElementById('block'); 25 const anim = target.animate({ translate: '200px' }, 26 { 27 duration: 10000, 28 easing: 'steps(1,jump-end)' 29 }); 30 await anim.ready; 31 await waitForNextFrame(); 32 // The neutral keyframe value changes from transform 'none' to '100px'. 33 // Since using jump-end for the easing function, the animated value is the 34 // underlying (neutral) value. If the box is not translated, then the change 35 // to the underlying value is not taking effect. 36 target.style.translate = '100px'; 37 await waitForNextFrame(); 38 takeScreenshot(); 39 }; 40 </script> 41 </html>