title: Pure CSS method of running an animation through on click
body: <p>I'm trying to recreate the material design ripple effect in pure CSS, and I have the animation prepared. The problem is, I can't make the animation run all the way through when the element is clicked. I've tried with transitions (<a href="http://codepen.io/anon/pen/zGGEJG">attempt 1 demo</a>, <a href="http://codepen.io/anon/pen/JddreR">attempt 2 demo</a>), but neither of these will run all of the way through.</p>
  
  <p>The other more likely method is with CSS3 animations (I'm not worried about browser support right now). I have the animation keyframes ready, but I've never worked with animations very much before and I don't see a way to run the animation upon clicking.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes ripple {
    0% {
      background-size: 1% 1%;
      opacity: 0.5;
    }
    70% {
      background-size: 1000% 1000%;
      opacity: 0.2;
    }
    100% {
      opacity: 0;
      background-size: 1000% 1000%;
    }
  }
  
  @keyframes ripple {
    0% {
      background-size: 1% 1%;
      opacity: 0.5;
    }
    70% {
      background-size: 1000% 1000%;
      opacity: 0.2;
    }
    100% {
      opacity: 0;
      background-size: 1000% 1000%;
    }
  }
  
  .button {
    background-color: blue;
    padding: 12px;
    display: inline-block;
    border-radius: 5px;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
  }
  
  .button::after {
    position: absolute;
    content: " ";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
    animation: ripple 0.6s 0s normal forwards infinite running ease-in;
  }
  
  .button:active::after {
    /*Somehow the animation needs to run on click only, and then run all the way through*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ripple button"&gt;&lt;a&gt;Click this&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Somethings I've thought about but have been unable to make work include changing the animation delay, making the <code>::after</code> transparent using <code>opacity</code>, and using the animation timing function.</p>