<a id="bouncy-link" class="bouncy" href="#">Bouncy link</a>
@keyframes bounce{
  0% {
    margin-top:0;
  }
  50% {
    margin-top:-20px;
  }
  70% {
    margin-top:5px;
  }
  90% {
    margin-top:-5px;
  }
  100%{
    margin-top:0px;
  }
}
.bouncy {
  display:block;
  position:absolute;
  top:50vh;
  left:45vw;
  text-decoration:none;
}
.bouncy-hover{
  animation: bounce 0.3s;
}
var bouncyLink = document.getElementById("bouncy-link");

bouncyLink.addEventListener("click",function(e){
  e.preventDefault();
  bouncyLink.classList.toggle("bouncy-hover");  
  setTimeout(function(){
    bouncyLink.classList.toggle("bouncy-hover");  
  },300);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.