JSFiddle - React, Tailwind, and code Playground

by Bruno AM

HTML

<body id="yellow">
    <h1>Estou aqui!</h1><br><br>
    <h4>Texto teste</h4>

    <div id="shadow"></div>
    <div id="square"></div>
  </body>

CSS

#yellow {
        background-color: yellow;
      }
      #shadow {
        background-color: black;
        width: 100%;
        height: 2048px;
        position:absolute; 
        left:1px; 
        top:1px;
        opacity:1;
      }
      #shadow {
        animation:10s ease 0s normal forwards 25 fadein;
        -webkit-animation:10s ease 0s normal forwards 25 fadein;
      }
      @keyframes fadein{from{opacity:0}
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
      }    
      @-webkit-keyframes fadein{from{opacity:0}
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
      }
      #square {
        margin-top: 10px;
        width: 20px;
        height: 20px;
        background: red;
        position: relative;
        -webkit-animation: mymove 10s infinite; 
      }
      @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 600px;}
      }