タップした場所にCSSアニメーション表示サンプル

<div id="c"></div>

html {
  position: relative;
}
body {
  margin: 0;
  padding: 0;
}
#c {
  position: absolute;
  z-index: 99999;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: cyan;
  opacity: 0;
}

#c.show {
  animation: a 0.3s;
}

@keyframes a {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(15);
    opacity: 0;
  }
}

// アニメーション用に.show追加
var w = window.innerWidth;
var h = window.innerHeight;
var c = document.getElementById('c');
var cs = c.style;
window.addEventListener('click', function(e) {
  cs.top =  e.pageY - 5 + 'px';
  cs.left = e.pageX - 5 + 'px';
  c.classList.add('show');
});

// アニメーション終了後に.show削除
c.addEventListener('animationend', function() {
  this.classList.remove('show');
});