worklet-animation-set-keyframes.https.html (1287B)
1 <html class="reftest-wait"> 2 <title>Worklet Animation sets keyframes</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Can update the keyframes 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_before = [ 24 { transform: 'translateX(0)' }, 25 { transform: 'translateX(200px)' } 26 ]; 27 const keyframes_after = [ 28 { transform: 'translateY(0)' }, 29 { transform: 'translateY(200px)' } 30 ]; 31 32 const box = document.getElementById('box'); 33 const effect = new KeyframeEffect(box, keyframes_before, {duration: 1000}); 34 const animation = new WorkletAnimation('constant_time', effect); 35 animation.play(); 36 37 waitForAsyncAnimationFrames(1).then(_ => { 38 effect.setKeyframes(keyframes_after); 39 waitForAsyncAnimationFrames(1).then(_ => { 40 takeScreenshot(); 41 }); 42 }); 43 }); 44 </script>