动画向前填充无法使用悬停选择器

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

：悬停状态仅在悬停时适用，因此不会持久。我建议通过javascript在mouseenter上切换一个类。我已为实现你的意图而牵线搭桥。如果您需要澄清，请告诉我。：(

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>

Answer 2

您可以考虑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">