Trigger an animation on hover

Question

I'm trying to trigger all of the animations on hover of the img class=.nav-icon. Currently the animation plays once when the page loads, I can't figure out how to tie it to :hover or 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;}
}

Answer 1

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.

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. When the img is hovered over, the animations are set for the li elements.

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.

/* 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>

Answer 2

We can go with this Idea of re-starting our animation when we hover on the Image in Javascript.

There are few ways to do it. Let's go with this one for now:

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).

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 :)

Answer 3

You could use animation-play-state to initially set it to paused and to running on hover.

The example below is probably the animation you but you can get the idea.

.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>