#container {
  display: flex;
  width: 4vw;
  margin-left: 3%;
}

.heart {
  display: grid;
  grid-gap: 0.08vw;
  grid-template-columns: repeat(9, 1fr);
  margin-top: 0.3vw;
}

.heart > * {
  width: 0.12vw;
  height: 0.12vw;
  font-size: 30px;
}

.heart dot {
  background-color: red;
  animation: animate 5s infinite ease-out;
  filter: opacity(0);
}
.heart dot:nth-of-type(2n) {
  animation-delay: 0.2s;
}

.heart dot:nth-of-type(3n) {
  animation-delay: 0.3s;
}

.heart dot:nth-of-type(4n) {
  animation-delay: 0.4s;
}

.heart dot:nth-of-type(5n) {
  animation-delay: 0.5s;
}

.heart dot:nth-of-type(6n) {
  animation-delay: 0.6s;
}

.heart dot:nth-of-type(7n) {
  animation-delay: 0.7s;
}

.heart dot:nth-of-type(8n) {
  animation-delay: 0.8s;
}

.heart dot:nth-of-type(9n) {
  animation-delay: 0.9s;
}

.heart dot:nth-of-type(10n) {
  animation-delay: 1s;
}

.heart dot:nth-of-type(11n) {
  animation-delay: 1.1s;
}

@keyframes animate {
  0% {
    transform: translateY(-10vh);
    filter: opacity(0);
  }

  25%,
  75% {
    transform: translateY(0);
    filter: opacity(1);
  }

  100% {
    transform: translateY(10vw);
    filter: opacity(0);
  }
}