我正试图在img class=.nav图标悬停时触发所有动画。目前，页面加载时会播放一次动画，我不知道如何将其绑定到：悬停或onmouseover="函数"；。
HTML
<nav id='nav-animation'>
<img class='nav-icon' src='images/nav-icon.png' alt='NAVIGATION'>
<ul class="nav-links">
<li id='li-1'><a href='index.html'>home</a></li>
<li id='li-2'><a href='works/works.html'>works</a></li>
<li id='li-3'><a href='thoughts/thoughts.html'>thoughts</a></li>
<li id='li-4'><a href='about/about.html'>about</a></li>
</ul>
</nav>
CSS
/* NAV ANIMATION */
#li-1 {
position: relative;
animation: li-1 .5s ease 0s alternate 1 forwards running;
}
@-webkit-keyframes li-1 {
0% {left: 400px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
#li-2 {
position: relative;
animation: li-2 .5s ease .3s alternate 1 both running;
}
@-webkit-keyframes li-2 {
0% {left: 280px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
#li-3 {
position: relative;
animation: li-3 .5s ease .7s alternate 1 both running;
}
@-webkit-keyframes li-3 {
0% {left: 190px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
#li-4 {
position: relative;
animation: li-4 .5s ease 1.1s alternate 1 both running;
}
@-webkit-keyframes li-4 {
0% {left: 80px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
您可以使用animation-play-state在悬停时将其初始设置为paused和running。
下面的例子可能是你的动画，但你可以得到的想法。
.animate {
position: relative;
animation: enter .5s linear;
animation-play-state: paused;
}
.animate:hover {
animation-play-state: running;
}
@keyframes enter {
0% {left: 80px; top: 0px; opacity: 1;}
100% {left: 0px; top: 0px; opacity: 1;}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='nav-animation'>
<img class='nav-icon' src='images/nav-icon.png' alt='NAVIGATION'>
<ul class="nav-links">
<li class="animate"><a href='index.html'>home</a></li>
<li class="animate"><a href='works/works.html'>works</a></li>
<li class="animate"><a href='thoughts/thoughts.html'>thoughts</a></li>
<li class="animate"><a href='about/about.html'>about</a></li>
</ul>
</nav>
</body>
</html>我不太确定你想要的效果，但你应该可以在不使用Javascript的情况下通过选择li元素作为img导航元素的兄弟元素来实现这一点。
在这个片段中，我们已经有了li元素，但如果需要的话，它们可以放在站点外的右侧。当img悬停在上面时，将为li元素设置动画。
当然，这有很多变体，例如，当整个包含元素没有悬停时，不保留li元素。
/* NAV ANIMATION */
#nav-animation img:hover ~ ul #li-1 {
animation: li-1 .5s ease 0s alternate 1 forwards running;
}
#nav-animation ul li {
position: relative;
}
@keyframes li-1 {
0% {left: 400px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1; display: block;}
}
#nav-animation:hover img:hover ~ ul #li-2 {
animation: li-2 .5s ease .3s alternate 1 both running;
}
@keyframes li-2 {
0% {left: 280px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
#nav-animation:hover img:hover ~ ul #li-3 {
animation: li-3 .5s ease .7s alternate 1 both running;
}
@keyframes li-3 {
0% {left: 190px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
#nav-animation:hover img:hover ~ ul #li-4 {
animation: li-4 .5s ease 1.1s alternate 1 both running;
}
@keyframes li-4 {
0% {left: 80px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}<nav id='nav-animation'>
<img class='nav-icon' src='images/nav-icon.png' alt='NAVIGATION'>
<ul class="nav-links">
<li id='li-1'><a href='index.html'>home</a></li>
<li id='li-2'><a href='works/works.html'>works</a></li>
<li id='li-3'><a href='thoughts/thoughts.html'>thoughts</a></li>
<li id='li-4'><a href='about/about.html'>about</a></li>
</ul>
</nav>当我们将鼠标悬停在Javascript中的图像上时，我们可以采用重新启动动画的想法。
有几种方法可以做到这一点。让我们现在就用这个：
我们可以先从动画元素中移除和添加，然后添加相同的类(可能需要经过一个小的时间延迟才能实现(。
这是演示代码：
const myImg = document.querySelector(".nav-icon");
const list1 = document.querySelector(".li-1");
const list2 = document.querySelector(".li-2");
const list3 = document.querySelector(".li-3");
const list4 = document.querySelector(".li-4");
myImg.addEventListener("mouseover",(e)=>{
// console.log("Hovered !!!");
list1.classList.remove("li-1");
list2.classList.remove("li-2");
list3.classList.remove("li-3");
list4.classList.remove("li-4");
setTimeout(()=>{
list1.classList.add("li-1");
list2.classList.add("li-2");
list3.classList.add("li-3");
list4.classList.add("li-4");
},100)
});/* NAV ANIMATION */
.li-1 {
position: relative;
animation: li-1 .5s ease 0s alternate 1 forwards running;
}
@-webkit-keyframes li-1 {
0% {left: 400px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1; display: block;}
}
.li-2 {
position: relative;
animation: li-2 .5s ease .3s alternate 1 both running;
}
@-webkit-keyframes li-2 {
0% {left: 280px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
.li-3 {
position: relative;
animation: li-3 .5s ease .7s alternate 1 both running;
}
@-webkit-keyframes li-3 {
0% {left: 190px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
.li-4 {
position: relative;
animation: li-4 .5s ease 1.1s alternate 1 both running;
}
@-webkit-keyframes li-4 {
0% {left: 80px; top: 0px; opacity: 0;}
100% {left: 0px; top: 0px; opacity: 1;}
}
img{
cursor:pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='nav-animation'>
<img class='nav-icon' src='https://picsum.photos/100/100' alt='NAVIGATION'>
<ul class="nav-links">
<li class='li-1'><a href='index.html'>home</a></li>
<li class='li-2'><a href='works/works.html'>works</a></li>
<li class='li-3'><a href='thoughts/thoughts.html'>thoughts</a></li>
<li class='li-4'><a href='about/about.html'>about</a></li>
</ul>
</nav>
</body>
</html>其他技巧：
另一种方法是有两个完全相同的动画除了它们的名称之外都是一样的，然后你可以切换使用哪一个对于：hover事件(或其他(，它将起作用。
(你也可以试试(谢谢：(