.hearts{
      position:absolute;
      width:100%;
      height: 100%;
      z-index:0;
      overflow:hidden;
      top:0;
      left:0;
    }
    .heart{
      position: absolute;
      bottom:-100px;
      width:40px;
      height: 40px;
      opacity:0.5;
      animation: rise 10s infinite ease-in;
    }
      .heart:before,
      .heart:after{
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: #fc2e5a;
          -moz-border-radius: 50px 50px 0 0;
          border-radius: 50px 50px 0 0;
          -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              -o-transform: rotate(-45deg);
                  transform: rotate(-45deg);
          -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
              -ms-transform-origin: 0 100%;
              -o-transform-origin: 0 100%;
                  transform-origin: 0 100%;
      }
      .heart:after{
          left: 0;
          -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
              -ms-transform: rotate(45deg);
              -o-transform: rotate(45deg);
                  transform: rotate(45deg);
          -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
              -ms-transform-origin: 100% 100%;
              -o-transform-origin: 100% 100%;
                  transform-origin :100% 100%;
      }

  
    .heart{
      
      bottom:-100px;
     
    
      opacity:0.5;
      animation: rise 10s infinite ease-in;
    }
    .heart:nth-child(1){
      width:40px;
      height:40px;
      left:10%;
      animation-duration:8s;
    }
    .heart:nth-child(2){
      width:20px;
      height:20px;
      left:20%;
      animation-duration:5s;
      animation-delay:1s;
    }
    .heart:nth-child(3){
      width:50px;
      height:50px;
      left:35%;
      animation-duration:7s;
      animation-delay:2s;
    }
    .heart:nth-child(4){
      width:80px;
      height:80px;
      left:50%;
      animation-duration:11s;
      animation-delay:0s;
    }
    .heart:nth-child(5){
      width:35px;
      height:35px;
      left:55%;
      animation-duration:6s;
      animation-delay:1s;
    }
    .heart:nth-child(6){
      width:45px;
      height:45px;
      left:65%;
      animation-duration:8s;
      animation-delay:3s;
    }
    .heart:nth-child(7){
      width:90px;
      height:90px;
      left:70%;
      animation-duration:12s;
      animation-delay:2s;
    }
    .heart:nth-child(8){
      width:25px;
      height:25px;
      left:80%;
      animation-duration:6s;
      animation-delay:2s;
    }
    .heart:nth-child(9){
      width:15px;
      height:15px;
      left:70%;
      animation-duration:5s;
      animation-delay:1s;
    }
    .heart:nth-child(10){
      width:90px;
      height:90px;
      left:25%;
      animation-duration:10s;
      animation-delay:4s;
    }
    @keyframes rise{
      0%{
        bottom:-100px;
        transform:translateX(0);
      }
      50%{
        transform:translate(100px);
      }
      100%{
        bottom:1080px;
        transform:translateX(-200px);
      }
    }