Анимация с сердечками для текста

Интересная анимация для текста, которая имитирует хаотичное движение сердечек. Например, подойдет для оформления заголовков на сайте знакомств.

Чтобы подключить анимацию необходимо скопировать HTML разметку, CSS стилизацию и JS скрипт, который генерирует движение сердечек по математической формуле.
Чтобы анимация работала должна быть подключена библиотека jquery перед закрывающим тегом body и перед подключением других скриптов.

HTML разметка

<div class="textcontainer">
   <span class="particletext hearts"><b>Сердечки</b></span>
</div>

CSS оформление

body .textcontainer {
  padding: 40px 0;
  text-align: center;
}
body .particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}
body .particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  -webkit-animation: hearts 3s ease-in infinite;
          animation: hearts 3s ease-in infinite;
}
body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}
body .particletext.hearts > .particle:before {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
body .particletext.hearts > .particle:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@-webkit-keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}

JS скрипт

function initparticles() {
   hearts();
}

function hearts() {
   $.each($(".particletext.hearts"), function(){
      var heartcount = ($(this).width()/50)*5;
      for(var i = 0; i <= heartcount; i++) {
         var size = ($.rnd(60,120)/10);
         $(this).append('');
      }
   });
}
jQuery.rnd = function(m,n) {
      m = parseInt(m);
      n = parseInt(n);
      return Math.floor( Math.random() * (n - m + 1) ) + m;
}

initparticles();