Чистый CSS-метод запуска анимации по щелчку

Я пытаюсь воссоздать эффект пульсации материального дизайна в чистом CSS, и у меня есть подготовленная анимация. Проблема в том, что я не могу заставить анимацию работать полностью, когда элемент нажат. Я пробовал с переходами (попытка 1 демо, попытка 2 демо), но ни один из них не будет проходить весь путь.

другой более вероятный метод - анимация CSS3 (я не беспокоюсь о поддержке браузера прямо сейчас). У меня есть ключевые кадры анимации готовы, но я никогда раньше не работал с анимацией, и я не вижу способа запустить анимацию при нажатии.

@-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>

что-то, о чем я думал, но не смог сделать работу, включая изменение задержки анимации, что делает ::after прозрачный с помощью opacity, и с помощью функции синхронизации анимации.