partially-out-of-view-animation.html (726B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>Animation on element which is partially out of the view</title> 4 <style> 5 6 @keyframes background-color { 7 0% { background-color: black } 8 1% { background-color: blue } 9 100% { background-color: blue } 10 } 11 12 div { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 background-color: black; 17 animation: background-color 0.1s 1 forwards; 18 top: -100px; 19 } 20 21 </style> 22 <div id="target"></div> 23 <script> 24 25 document.getElementById("target").addEventListener("animationend", AnimationEndListener); 26 27 function AnimationEndListener(event) { 28 setTimeout(RemoveReftestWait, 0); 29 } 30 31 function RemoveReftestWait() { 32 document.documentElement.classList.remove("reftest-wait"); 33 } 34 35 </script>