body {
  background-color: black;
  overflow-x: hidden;  
  padding: 5px;
}
 
.area {
  width: 100%;
  height: 300px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
}
 
.area2 {
  width: 100%;
  height: 300px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
}
 
.xraypix {
  position: absolute;
  top: 0;
  left: 0;
  animation: moveAcross 4s linear infinite;
  /*animation-play-state: paused;*/
}
 
.xraypix-1 {
  fill: red;
  animation-delay: -1s;
  animation-duration: 10s;
}
 
.xraypix-2 {
  fill: blue;
  top: 10px;
  animation-delay: -2s;
  animation-duration: 6s;
}
 
.xraypix-3 {
  fill: green;
  top: 20px;
  animation-delay: -3s;
  animation-duration: 8s;
}
 
.xraypix-4 {
  fill: white;
  top: 30px;
  animation-delay: -4s;
  animation-duration: 12s;
}
 
.xraypix-5 {
  fill: yellow;
  top: 40px;
  animation-delay: -5s;
  animation-duration: 8s;
}
 
.xraypix-6 {
  fill: violet;
  top: 50px;
  animation-delay: -6s;
  animation-duration: 10s;
}
 
@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 110%;
  }
}
 
 
Resources