<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);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.