Pure CSS method of running an animation through on click - html

Question

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 (attempt 1 demo, attempt 2 demo), but neither of these will run all of the way through.
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.
#-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*/
}
<div class="ripple button"><a>Click this</a></div>
Somethings I've thought about but have been unable to make work include changing the animation delay, making the ::after transparent using opacity, and using the animation timing function.

Answer 1

Try this out but you need to use jquery to keep the button active , i didn't used jquery therefore hold the click;
#-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:active: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;}
<div class='ripple button'><a href=''>hell</a></div>

Answer 2

I've have done this another way:
With :focus the styles stays active. You can view it here:
http://codepen.io/jonnitto/pen/OVmvPB?editors=110