title: Why does keyframes animation on click only trigger once?
body: <p>Below is my code, the keyframes animation only happens on first click. Any ideas?</p>
  
  <p><strong><em>Solved, see my answer below</em></strong></p>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>$(".audioplayer-playpause").click(function(){
    $('.audioplayer-playpause').css({
  
      //for firefox
      "-moz-animation-name":"playPausePulse",
      "-moz-animation-duration":"0.1s",
      "-moz-animation-iteration-count":"1",
      "-moz-animation-fill-mode":"forwards",
  
      //for safari &amp; chrome
      "-webkit-animation-name":"playPausePulse",
      "-webkit-animation-duration":"0.1s",
      "-webkit-animation-iteration-count":"1",
      "-webkit-animation-fill-mode":"forwards",
  
    });
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@-moz-keyframes playPausePulse /*--for webkit--*/{
      0%   {background-color: rgba(0, 0, 0, 0.05);}
      50%   {background-color: rgba(0, 0, 0, 0.1);}
      100%   {background-color: rgba(0, 0, 0, 0.05);}
  }
  
  @-webkit-keyframes playPausePulse /*--for webkit--*/{
      0%   {background-color: rgba(0, 0, 0, 0.05);}
      50%   {background-color: rgba(0, 0, 0, 0.1);}
      100%   {background-color: rgba(0, 0, 0, 0.05);}
  }
  </code></pre>
  
  <p>This is very relevant but I visited both reference links and couldn't find a solution that worked:
  <a href="https://stackoverflow.com/questions/11279646/run-keyframes-animation-on-click-more-than-once">run keyframes-animation on click more than once</a> </p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks.
  Thomas.</p>