animation-delay-010.html (1438B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Animations Test: animation-delay - liveness with 5 animationstart</title> 6 <link rel="author" title="Brian Birtles" href="mailto:bbirtles@mozilla.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animations"> 8 <meta name="assert" content="Check that extending the animation-delay triggers 9 an animationstart event"> 10 <meta name="flags" content="dom"> 11 <link rel="match" href="animation-common-ref.html"> 12 <style> 13 @keyframes all-orange { 14 from { background-color: orange } 15 to { background-color: orange } 16 } 17 div { 18 width: 100px; 19 height: 100px; 20 background-color: red; 21 } 22 </style> 23 <div></div> 24 <script> 25 // Set up animation with a negative delay such that it finishes very soon 26 var div = document.querySelector('div'); 27 div.style.animation = 'all-orange 1000s -999.99s'; 28 29 // Wait for the animation to finish 30 div.addEventListener('animationend', function() { 31 // Set up an animationstart event handler to change the background color 32 div.addEventListener('animationstart', function() { 33 div.style.animation = 'none'; 34 div.style.backgroundColor = 'green'; 35 }); 36 37 // Then extend the delay so that the animation restarts 38 div.style.animationDelay = '0s'; 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>