animation-delay-008.html (1122B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Animations Test: animation-delay - liveness</title> 5 <link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations"> 7 <meta name="assert" content="Check that changes to animation-delay on a running 8 animation are reflected in output"> 9 <meta name="flags" content="dom"> 10 <link rel="match" href="animation-common-ref.html"> 11 <style> 12 @keyframes two-step { 13 from { background-color: red } 14 50% { background-color: green } 15 to { background-color: green } 16 } 17 div { 18 width: 100px; 19 height: 100px; 20 background-color: orange; 21 } 22 </style> 23 <div></div> 24 <script> 25 // Set up animation with no delay 26 var div = document.querySelector('div'); 27 div.style.animation = 'two-step 200s steps(1)'; 28 window.getComputedStyle(div).animation; 29 30 // Wait until animation has started and change delay 31 window.requestAnimationFrame(function() { 32 // Fast-forward to mid-point 33 div.style.animationDelay = '-100s'; 34 document.documentElement.removeAttribute('class'); 35 }); 36 </script> 37 </html>