.main-container {
  height: 100%;
  width: 100vw;
  opacity: 1;
  animation: view 3s linear infinite;
  display: flex;
  justify-content: center;
  background: rgba(252, 3, 179, 0.24);
  z-index: 1000;
  position: fixed;
  top: 0;
}

.sprite-container-1 {
}

.sprite-container-2 {
  transform: translate(200px, 400px) scale(1) rotate(45deg);
}

.sprite-container-3 {
  transform: translate(200px, 100px) scale(0.8) rotate(90deg);
}

.sprite-container-4 {
  transform: translate(0, -100px) scale(1) rotate(30deg);
}
.sprite-container-5 {
  transform: translate(-800px, 200px) scale(0.8) rotate(50deg);
}
.sprite-container-6 {
  transform: translate(-1200px, 250px) scale(0.8) rotate(-20deg);
}
.sprite-container-7 {
  transform: translate(150px, 250px) scale(0.8) rotate(0deg);
}

.sprite {
  height: 200px;
  width: 200px;
  background: url("barby.png") 0 0;
  position: relative;
}

.image-1 {
  animation: play 0.6s steps(14) infinite;
}

.image-2 {
  animation: play 0.8s steps(14) infinite;
  transform: translate(-100px, -100px) scale(0.8);
}

.image-3 {
  animation: play 1s steps(14) infinite;
  transform: translate(-100px, -400px) scale(0.6);
}

.image-4 {
  animation: play 0.7s steps(14) infinite;
  transform: translate(30px, -600px) scale(0.6);
}

.image-5 {
  animation: play 0.9s steps(14) infinite;
  transform: translate(200px, -900px) scale(0.8);
}

.image-6 {
  animation: play 0.5s steps(14) infinite;
  transform: translate(200px, -900px) scale(0.5);
}

.image-7 {
  animation: play 1s steps(14) infinite;
  transform: translate(-200px, -1100px) scale(0.4);
}

@keyframes play {
  100% {
    background-position: -2800px;
  }
}

@keyframes step {
  100% {
    left: 100%;
  }
}

@keyframes view {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}