Анимация-заполнение-вперед не работает с селектором наведения

Question

Я хотел, чтобы изображение постоянно исчезало до тех пор, пока пользователь не обновит страницу, и я смог сделать это с помощью анимации вперед. Однако я хотел бы, чтобы эта анимация запускалась только при наведении на нее курсора.

Я могу заставить изображение плавно исчезать, но оно сбрасывается после того, как пользователь переместит курсор с элемента. Короче говоря, я не могу заставить переход и эффект наведения работать вместе.

Вот HTML

    <div class="hill">
    <img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
    </div>

Вот CSS

body {
  height:1000px;
}

#hill {
  position: relative;
  height: 100vh;
  top: 100vh; 
}

@-webkit-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

#hill {
  -webkit-animation: fade 5s;
  -moz-animation:    fade 5s;
  -o-animation:      fade 5s;
  animation:         fade 5s;
  animation-fill-mode: forwards;
}

Это кодовая ручка для моего проекта: https://codepen.io/narutofan389/collab/LYpxqmY

Большое спасибо за вашу помощь.

Answer 1

Вы можете рассмотреть animation-play-state и иметь анимацию, определенную изначально для элемента, но продолжительность должна быть короткой, потому что она не будет работать, если пользователь быстро перемещает мышь

#hill {
  position: relative;
  height: 100vh;
  animation: fade 0.5s paused forwards;
}


#hill:hover {
  animation-play-state:running;
}

@keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">

Answer 2

: состояние наведения применяется только при наведении, поэтому оно не сохраняется. Я бы порекомендовал переключить класс на mouseenter через javascript. Я приложил скрипку к выполнению того, что вы собираетесь. Дайте мне знать, если вам нужна ясность. :)

document.addEventListener("DOMContentLoaded", function() {
  var img = document.getElementById("hill");
  
  img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});

body {
  height:1000px;
}

#hill {
  position: relative;
  height: 100vh;
}

@-webkit-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

#hill.hide {
  -webkit-animation: fade 5s;
  -moz-animation:    fade 5s;
  -o-animation:      fade 5s;
  animation:         fade 5s;
  animation-fill-mode: forwards;
}

<div class="hill">
    <img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
    </div>