悬停时触发动画

时间：2020-12-31 20:43:29

标签： javascript html css

我试图在 img class=.nav-icon 悬停时触发所有动画。目前动画在页面加载时播放一次，我不知道如何将它绑定到 :hover 或 onmouseover="function"。

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;}
}

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

我不完全确定您想要的效果，但是您应该能够在不使用 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>

答案 2 :(得分：0)

当我们在 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 事件（或其他事件），它会起作用。

（你也可以试一试）谢谢:)

相关问题
最新问题