SVG shake animation on hover

Issue

I am trying to make an svg img shake with CSS keyframes when you hover over it.

This is the effect I am trying to achieve: https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J

There is some javascript that animates the same svg but it targets a parent div #ellipse, that moves from left to right whenn clicked on the hamburger icon. I don't see how it could interfere, but I've added it just to make sure.

I have added the relevant code below. For the full code please see the website.

// Other unrelated(!?) animations on #ellipse //

function moveEllipseRight() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(0px)'
    },
    {
      transform: 'translateX(' + width + 'px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}

function moveEllipseLeft() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(' + width + 'px)'
    },
    {
      transform: 'translateX(0px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}

#ellipse {
  position: absolute;
  top: 120px;
  z-index: -99;
  animation: 3s linear 0s slide 1;
  left: -200px;
}

img.shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<div id="ellipse">
  <img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>

Solution

The issue is with your #ellipse style.

#ellipse {
    position: absolute;
    top: 120px;
    z-index: -99; /* remove this, it is not doing anything useful. */ 
    animation: 3s linear 0s slide 1;
    left: -200px;
}

---

the issue was, hover was not getting triggered at all, as it was behind container element due to negative z-index. This negative z index is not useful at all, unless you are planning to put text above the image, which I do not see in your site.

Answered By - Prajwal