animation-delay-009.html (1381B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Animations Test: animation-delay - liveness with animationend</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 shortening the animation-delay triggers 8 an animationend event"> 9 <meta name="flags" content="dom"> 10 <link rel="match" href="animation-common-ref.html"> 11 <style> 12 @keyframes all-red { 13 from { background-color: red } 14 to { background-color: red } 15 } 16 div { 17 width: 100px; 18 height: 100px; 19 background-color: orange; 20 } 21 </style> 22 <div></div> 23 <script> 24 // Set up animation with no delay 25 var div = document.querySelector('div'); 26 div.style.animation = 'all-red 1000s'; 27 window.getComputedStyle(div).animation; 28 29 // Set up an animationend event handler to change the background color 30 div.addEventListener('animationend', function() { 31 div.style.animation = 'none'; 32 div.style.backgroundColor = 'green'; 33 }); 34 35 // Wait until animation has started and change delay 36 window.requestAnimationFrame(function() { 37 // Fast-forward to end 38 div.style.animationDelay = '-1000s'; 39 40 // Wait a frame to allow the event handler to run 41 window.requestAnimationFrame(function() { 42 document.documentElement.removeAttribute('class'); 43 }); 44 }); 45 </script> 46 </html>