stacking-context-lose-opacity-1.html 451 B

1234567891011121314151617181920212223242526
  1. <!DOCTYPE html>
  2. <title>
  3. Opacity animation creates a stacking context even if the opacity property
  4. is overridden by an !important rule
  5. </title>
  6. <style>
  7. span {
  8. height: 100px;
  9. width: 100px;
  10. position: fixed;
  11. background: green;
  12. top: 50px;
  13. }
  14. @keyframes Opaque {
  15. from, to { opacity: 1 }
  16. }
  17. #test {
  18. width: 100px; height: 100px;
  19. background: blue;
  20. animation: Opaque 100s;
  21. opacity: 1 !important;
  22. }
  23. </style>
  24. <span></span>
  25. <div id="test"></div>