.effect-hugging {
  * {
    position: absolute;
    z-index: 4;
  }
  .heart-1 {
    height: 23px;
    rotate: -20deg;
    left: 14%;
    animation: effect-heart-animation 5s 2.5s linear infinite;
  }
  .heart-2 {
    height: 11px;
    rotate: -9deg;
    left: 31%;
    bottom: 53%;
    animation: effect-heart-animation 5s 1.5s linear infinite;
  }
  .heart-3 {
  height: 11px;
    rotate: 30deg;
    left: 94%;
    bottom: 33%;
    animation: effect-heart-animation 5s 2s linear infinite;
  }
  .heart-4 {
  height: 15px;
    rotate: 28deg;
    left: 61%;
    bottom: 72%;
    animation: effect-heart-animation 5s 1s linear infinite;
  }
  .heart-5 {
  height: 13px;
    rotate: 19deg;
    left: 58%;
    bottom: 32%;
    animation: effect-heart-animation 5s 0.5s linear infinite;
  }
  .heart-6 {
   height: 13px;
    rotate: -20deg;
    left: 14%;
    bottom: 22%;
    animation: effect-heart-animation 5s 0.9s linear infinite;
  }
  .heart-7 {
   height: 13px;
    rotate: -20deg;
    left: 45%;
    bottom: 10%;
    animation: effect-heart-animation 5s 0.5s linear infinite;
  }
  .heart-8 {
   height: 14px;
    rotate: 10deg;
    left: 86%;
    animation: effect-heart-animation 5s 0s linear infinite;
  }
  .heart-9 {
    height: 10px;
    rotate: 14deg;
    left: 50%;
    bottom: 50%;
    animation: effect-heart-animation 5s 0.3s linear infinite;
  } 
  .heart-10 {
 height: 12px;
    rotate: 25deg;
    left: 87%;
    bottom: 46%;
    animation: effect-heart-animation 5s 1s linear infinite;

  }
}
@keyframes effect-heart-animation{
    30%{
          transform: translate(6px,-5px);
    }
    50%{
          transform: translate(-10px,-5px),rotate(20deg);
    }
    75%{
          transform: translate(-3px,-22px);
          opacity: 1;
    }
    100%{
          transform: translate(-25px,-35px);opacity: 0;
    }
}