title: Best way to restart animation with javascript (without using webkit)
body: <p>Im coding an interactive element that turns to look towards you when you click on it. I just have an onclick event that adds a class with the animation. Unfortunately, after playing the first time the animation does not reset. I found a question asking the same thing, but it was much too advanced for me and additionally used webkit which I dont want to use for this. Is there a simple way to reset the animation?</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-css lang-css prettyprint-override"><code>.susanb{
      background-image:url('susanb.png');
      background-size:contain;
      width:18%; 
      height:45%;
      background-repeat:no-repeat;
      margin-top:12%;
      margin-left: 60%;
      position:absolute;
  }
  
  .susanbstare{
      animation-name: stare;
      animation-duration: 2s;
      animation-fill-mode: forwards;
  }
  
  @keyframes stare{
      0%{background-image: url('susanbstarin.png')}
      99%{background-image: url('susanbstarin.png')}
      100%{background-image: url('susanb.png')}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="susanb" id="susan"&gt;&lt;div style="width:100%;height:100%;position:absolute;" onclick="stare();"&gt;&lt;/div&gt;
      &lt;script&gt;
          function stare(){
              document.getElementById("susan").removeAttribute("class");
              document.getElementById("susan").setAttribute("class", "susanb susanbstare");
          }
  
      &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>