Разве эффекты анимации и наведения при пересечении не работают вместе?

Question

Я работаю над проектом, который использует Intersection Observer для добавления анимации в стиль элемента при входе. Тем не менее, я замечаю, что атрибут : hover больше не работает, когда я применяю стиль. Я делаю это неправильно, или эти два не совместимы? На скрипте JS я закомментировал атрибут hover по умолчанию. Попробуйте раскомментировать и посмотрите, что получится.

Я пробовал banner.classList.add(/new class in here/), но этот метод также убрал :hover. ДЕМО: Демо

Answer 1

отключить анимацию при наведении, потому что анимация имеет более высокую специфичность

const options = {
  root: null,
  threshold: 1,
};

const banner = document.querySelector('.product-banner');

const observerAnim = new IntersectionObserver(function(entries, observer) {

  entries.forEach(entry => {

    if (!entry.isIntersecting) {
      return;
    }
    banner.style.animation = '1s ease-in-out home-page-fade';
    banner.style.animationFillMode = 'forwards';
    observer.unobserve(banner);
  });

}, options);

observerAnim.observe(banner);

body {
  background-color: #fff;
  min-height: 2000px;
}

img.product-banner {
  opacity:0;
  position: relative;
  top: 1000px;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

@keyframes home-page-fade {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


img.product-banner:hover {
  animation: none !important;
  opacity: 0.8;
  transform: scale(0.9);
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;

}

<h1>
    Scroll Effect
  </h1>

  <img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">