<!DOCTYPE html> <html class="reftest-wait"> <title> Transform transition and animation overridden by !important rule create a stacking context </title> <style> span { height: 100px; width: 100px; position: fixed; background: green; top: 50px; } @keyframes Transform100px { from, to { transform: translateX(100px); } } #test { width: 100px; height: 100px; background: blue; transform: translateX(200px) ! important; transition: transform 100s steps(1, start); animation: Transform100px 100s; } </style> <span></span> <div id="test"></div> <script> window.addEventListener("load", () => { var target = document.getElementById("test"); getComputedStyle(target).transform; // Change the transform style to 'none'. target.style.setProperty("transform", "none", "important"); // Important style is changed but there is a CSS animation, // so transition won't be visible and the CSS animation is overridden by // the !important rule. As a result transform style here should be 'none' // specified by the important rule, but we should create a stacking // context for it because there are animations. requestAnimationFrame(() => { document.documentElement.classList.remove("reftest-wait"); }); }); </script>