CSS转换在鼠标移出时变为初始状态时，请停止重置延迟加载

Question

我有一个页面，其中的图像已加载lazyload data-src。加载后，用户:hover是父级div时，图像transform translate带有keyframes。问题在于，当用户mouseout时，图像再次变为lazyload。我只想执行lazyload 1次，而不要一直mouseout是父项hover的用户div：

您可以看到示例here（请参阅导航菜单下面的第一部分）。

// Initialize library
lozad('.lozad', {
    load: function(el) {
        el.src = el.dataset.src;
        el.onload = function() {
            el.classList.add('fadelazy')
        }
    }
}).observe()

HTML

 <section id="home">
      <div class="container">
  <div class="row" style="padding-top: 100px;">
    <div class="img-container col-lg-7 mx-auto">
      <img class="top lozad superman" alt="" src="img/Ilustracion%20Hombre-05.png" data-src="img/Ilustracion%20Hombre-05.png" src="img/Ilustracion%20Hombre-05.png" width="100%" />
            <img class="bottom lozad" src="img/Letras%20We%20are%20Rucab-06.png" data-src="img/Letras%20We%20are%20Rucab-06.png" width="100%" title="We are RUCAB" alt="We are RUCAB" />

          </div>
    <div class="col-lg-5 mx-auto home-text-div">
      <p class="home-text-p">La Residencia Universitaria J. A. Marcos Blanco tiene una ubicación excepcional, a diez minutos andando del Campus Universitario de Badajoz. Cerca de la residencia encontrarás todo lo que necesitas: un centro comercial nuevo y moderno, un cine con multitud de ofertas gastronómicas, el Hospital Universitario y a pocos kilómetros de Portugal. Bien comunicada con los nuevos autobuses eléctricos urbanos, que te dejarán al lado de la residencia y te llevarán a cualquier zona de la ciudad. Una residencia actual que te permitirá disfrutar de una etapa única e inolvidable. ¡Descúbrela! </p>
    </div>
  </div>
  </div>
     </section>

CSS

/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(48px);
    transform: translateY(48px);
  }
  33.3% {
    -webkit-transform: translateY(-46px);
    transform: translateY(-46px);
  }
  49.95% {
    -webkit-transform: translateY(44px);
    transform: translateY(44px);
  }
  66.6% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  83.25% {
    -webkit-transform: translateY(41px);
    transform: translateY(41px);
  }
  100% {
    -webkit-transform: translateY(40);
    transform: translateY(40);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(48px);
    transform: translateY(48px);
  }
  33.3% {
    -webkit-transform: translateY(-46px);
    transform: translateY(-46px);
  }
  49.95% {
    -webkit-transform: translateY(44px);
    transform: translateY(44px);
  }
  66.6% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  83.25% {
    -webkit-transform: translateY(41px);
    transform: translateY(41px);
  }
  100% {
    -webkit-transform: translateY(40);
    transform: translateY(40);
  }
}

#home:hover .superman, #home:focus .superman, #home:active .superman {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}