<!DOCTYPE html> <title> CSS transform animation winning over web animation in delay phase creates a stacking context </title> <style> span { height: 100px; width: 100px; position: fixed; background: green; top: 50px; } @keyframes TransformNone { from, to { transform: none; } } #test { width: 100px; height: 100px; background: blue; animation: TransformNone 100s; } </style> <span></span> <div id="test"></div> <script> document.getElementById("test") .animate({ transform: ['translateX(100px)', 'translate(100px)'] }, { duration: 100000, delay: 100000 }); requestAnimationFrame(function() { document.documentElement.classList.remove("reftest-wait"); }); </script>