title: SVG shake animation on hover
body: <p>I am trying to make an svg img shake with CSS keyframes when you hover over it.</p>
  <p>This is the effect I am trying to achieve: <a href="https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J</a></p>
  <p>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.</p>
  <p>I have added the relevant code below. For the full code please see the website.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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'
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="ellipse"&gt;
    &lt;img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>