background-position-after-finish.html (846B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>background-position-x animation after finish</title> 4 <style> 5 @keyframes holdBackgroundPosition { 6 from,to { background-position-x: 100%; } 7 } 8 #test { 9 height: 100px; 10 width: 100px; 11 background-repeat: no-repeat; 12 background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ 13 animation: holdBackgroundPosition 0.01s; 14 background-position-x: 50%; 15 } 16 </style> 17 <div id="test" class="reftest-opaque-layer"></div> 18 <script> 19 document.getElementById("test").addEventListener("animationend", () => { 20 requestAnimationFrame(() => { 21 document.documentElement.classList.remove("reftest-wait"); 22 }) 23 }); 24 </script>