.hearts {
 width: 5%;
 min-width: 100px;
 height: 25%;
 min-height: 600px;
 position: absolute;
 z-index: 10;
}

.heart {
 position: absolute;
 height: 20%;
 min-height: 25px;
 width: 15%;
 min-width: 25px;
 background-color: red;
 -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
         mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: bottom;
         mask-position: bottom;
  opacity: 0;
  animation: floating-heart 10s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

@keyframes floating-heart {
  0% {
    opacity: 0;
    bottom: 0%;
    left: 0%;
  }
  10% {
    opacity: 1;
    bottom: 20%;
    left: 70%;
  }
  20% {
    bottom: 40%;
    left: 10%;
  }
  30% {
    bottom: 60%;
    left: 50%;
  }
  40% {
    opacity: 1;
    bottom: 80%;
    left: 5%;
  }
  48% {
    opacity: 0;
    bottom: 100%;
    left: 60%;
  }
  100% {
    opacity: 0;
    bottom: 100%;
    left: 90%;
  }
}

.heart:nth-child(1) {  
  animation-delay: 1s;
  background-color: pink;
}

.heart:nth-child(2) {
  animation-delay: 2.5s;
}

.heart:nth-child(3) {
  animation-delay: 3.5s;
  background-color: pink;
}

.heart:nth-child(4) {
  animation-delay: 4.5s;
}

.heart:nth-child(5) {
  animation-delay: 5.5s;
  background-color: pink;
}

.heart:nth-child(6) {
  animation-delay: 6.5s;
}

.heart:nth-child(7) {
  animation-delay: 7.5s;
  background-color: pink;
}

.heart:nth-child(8) {
  animation-delay: 8.5s;
}

.heart:nth-child(9) {
  animation-delay: 9.5s;
  background-color: pink;
}

.heart:nth-child(10) {
  animation-delay: 10.5s;
}