worklet-animation-set-timing.https.html (1260B)
1 <html class="reftest-wait"> 2 <title>Worklet Animation sets timing</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Can update the timing for an effect while the animation is running"> 5 <link rel="match" href="references/translated-box-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="common.js"></script> 10 11 <style> 12 #box { 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 </style> 18 19 <div id="box"></div> 20 21 <script> 22 registerConstantLocalTimeAnimator(500).then(()=>{ 23 const keyframes = [ 24 { transform: 'translateY(0)' }, 25 { transform: 'translateY(400px)' } 26 ]; 27 const options_before = { 28 duration: 1000 29 }; 30 const options_after = { 31 duration: 2000 32 }; 33 34 const box = document.getElementById('box'); 35 const effect = new KeyframeEffect(box, keyframes, options_before); 36 const animation = new WorkletAnimation('constant_time', effect); 37 animation.play(); 38 39 waitForAsyncAnimationFrames(1).then(_ => { 40 effect.updateTiming(options_after); 41 waitForAsyncAnimationFrames(1).then(_ => { 42 takeScreenshot(); 43 }); 44 }); 45 }); 46 </script>