JSFiddle - React, Tailwind, and code Playground

by iguimaraes

HTML

<div id="fundo">
<div id="ball1"></div>
<div id="ball2"></div>
</div>

CSS

#fundo{
    height: 100%;
    width: 100%;
    position: absolute;
}

#ball1{
    position: absolute;
    background-color: black;
    height: 50px;
    width: 50px;
      border-radius: 100%;
    
      animation-name: Animacao;
      animation-duration: 5s;
        animation-delay: 1s;
      animation-iteration-count: infinite;
}
#ball2{
    position: absolute;
    background-color: black;
    height: 50px;
    width: 50px;
      border-radius: 100%;
    
      animation-name: Animacao;
      animation-duration: 5s;
      animation-iteration-count: infinite;
}



@keyframes Animacao {
  0%{
      margin-left: 100%;
  }
    10% {
    margin-left: 90%;
  }
  20% {
    margin-left: 80%;
  }
  30% {
    margin-left: 70%;
  }
  40% {
    margin-left: 60%;
  }
  50% {
    margin-left: 50%;
  }
  60% {
    margin-left: 40%;
  }
  70% {
    margin-left: 30%;
  }
  80% {
    margin-left: 20%;
  }
  90% {
    margin-left: 10%;
  }
  100% {  
      display: none;
  }