stacking-context-opacity-win-in-delay.html 491 B

12345678910111213141516171819202122232425262728
  1. <!DOCTYPE html>
  2. <title>
  3. Opacity animation winning over another opacity animation in delay phase
  4. creates a stacking context
  5. </title>
  6. <style>
  7. span {
  8. height: 100px;
  9. width: 100px;
  10. position: fixed;
  11. background: green;
  12. top: 50px;
  13. }
  14. @keyframes Opacity1 {
  15. from, to { opacity: 1; }
  16. }
  17. @keyframes Opacity0 {
  18. from, to { opacity: 0; }
  19. }
  20. #test {
  21. width: 100px; height: 100px;
  22. background: blue;
  23. animation: Opacity0 100s 100s, Opacity1 100s;
  24. }
  25. </style>
  26. <span></span>
  27. <div id="test"></div>