在 hover 上触发 animation
[英]Trigger an animation on hover
问题描述
I'm trying to trigger all of the animations on hover of the img class=.nav-icon.
我正在尝试触发 img class=.nav-icon 的 hover 上的所有动画。 Currently the animation plays once when the page loads, I can't figure out how to tie it to:hover or onmouseover="function".目前 animation 在页面加载时播放一次，我不知道如何将其绑定到：hover 或 onmouseover="function"。
HTML 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 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 个解决方案
解决方案1
1 2020-12-31 21:09:24
You could use animation-play-state to initially set it to paused and to running on hover.您可以使用animation-play-state最初将其设置为paused并在 hover 上running 。
The example below is probably the animation you but you can get the idea.下面的示例可能是您的 animation，但您可以理解。
.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>
解决方案2
1 2020-12-31 21:53:03
I'm not exactly sure of the effect you want, but you should be able to do this without use of Javascript by selecting the li elements as siblings of the img navigation element.我不确定您想要的效果，但是您应该能够通过选择 li 元素作为 img 导航元素的兄弟元素，在不使用 Javascript 的情况下做到这一点。
In this snippet we already have the li elements in place - but they could just be placed out of site to the right if that's what's required.在这个片段中，我们已经有了 li 元素——但如果需要的话，它们可以放在右边的站点之外。 When the img is hovered over, the animations are set for the li elements.当 img 悬停在上面时，将为 li 元素设置动画。
There are many variations of this of course, not keeping the li elements in view when the whole containing element is not hovered for example.当然，这有很多变体，例如，当整个包含元素未悬停时，不保留 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>
解决方案3
0 2020-12-31 21:42:04
We can go with this Idea of re-starting our animation when we hover on the Image in Javascript.我们可以用 go 这个想法重新启动我们的 animation，当我们在 Z9542F579DF8E8138ADE69F8F5310BF2Z 上的图像上 Z9F1C25ED1523962F1BBF9DEE9BE5092BZ 时。
There are few ways to do it.有几种方法可以做到这一点。 Let's go with this one for now:现在让我们用这个 go ：
We can first remove and add then add the same class from our animation element (May be after a small Time delay to Achieve this).我们可以先删除并添加，然后从我们的 animation 元素中添加相同的 class（可能需要经过一小段时间延迟才能实现）。
Here is the DEMO Code:这是演示代码：
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>
OTHER TRICK:其他技巧：
The other way around it, is by having two animations that are exactly the same except for their name, then you can switch which one you use for the:hover event (or whatever) and it will work.
(You may give it a shot as well) Thanks:) （你也可以试一试）谢谢：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.