title: Applying two separate pure CSS3 animations on a button element
body: <p>I need to run two CSS3 animations on a button element (ideally in pure CSS, semi-ideally in cross-browser, vanilla JS) for a web mobile application of mine. </p>
  
  <p>The first is a bulge-out-and-in animation; it's to play when the button element loads. </p>
  
  <p>The second is a spinning animation applied on the button element; it's to play when the button is tapped. </p>
  
  <p>Know that tapping the button causes the page to refresh. So the idea is that the user would see the button spin after tapping it, and then have it bulge-out-and-in (exactly once) after the page reloads.</p>
  
  <p>However the behaviour is erratic. Ergo, I'm seeing the bulge animation fire multiple times (in succession). </p>
  
  <p>If I exaggerate this bulge-out, it seems to only play once, but there's a visible shiver in the button before it plays (almost as if the animation is firing and aborting midway multiple times).</p>
  
  <p>I can't tell why this is happening. Can you help me accomplish this cleaninly without shenanigans?</p>
  
  <hr>
  
  <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>button.refresh:focus {
    -webkit-animation: rotation 0.5s 20 linear;
  }
  
  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(359deg);
    }
  }
  
  @keyframes bulge {
    0% {
      transform: scale( 1);
    }
    20% {
      transform: scale( 1.1);
    }
    100% {
      transform: scale( 1);
    }
  }
  
  .load {
    -webkit-animation: bulge 0.5s 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="POST" action="/"&gt;
    &lt;button class="refresh load" style="background-image: url('{{ static_url }}img/refresh.png')" type="submit" name="rf" value="1"&gt;&amp;nbsp;&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>p.s. ignore the <code>{{ }}</code> type syntax - that's a Django framework thing.</p>