how can i fix this pulse animation to work?

Question

i'm setting up a new pulse animation inside my project

but this is not work how can i fix this and what is my problem ?

i want when i click(just one click without holding click long) on this circle get pulsing and after 2 second stop

 var abox = document.getElementsByClassName("pulsediv")[0]; function pulsing(){ abox.classList.toggle("pulse"); }

 @import "compass/css3"; body, html { height: 100%; background: #fff; } .pulsediv{ position: relative; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; display: block; width: 100px; height: 100px; font-size: 1.3em; font-weight: light; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center; line-height: 100px; letter-spacing: -1px; color: white; border: none; border-radius: 50%; background: #5a99d4; cursor: pointer; box-shadow: 0 0 0 0 rgba(#5a99d4, .5); } .pulse { animation: pulse 2s; } @-webkit-keyframes pulse { 0% { @include transform(scale(.9)); } 70% { @include transform(scale(1)); box-shadow: 0 0 0 50px rgba(#5a99d4, 0); } 100% { @include transform(scale(.9)); box-shadow: 0 0 0 0 rgba(#5a99d4, 0); } }

 <span class="pulsediv" onclick="pulsing">Hot</span>

Answer 1

I fix your animation, and call onClick function in Javascript, and it works.

 var abox = document.getElementsByClassName("pulsediv")[0]; // reset the transition by... abox.addEventListener("click", function(e){ e.preventDefault(); // -> removing the class abox.classList.remove("pulse"); // -> and re-adding the class setTimeout(() => abox.classList.add("pulse"), 0); }, false);

 body, html { height: 100%; background: #fff; } .pulsediv { position: relative; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; display: block; width: 100px; height: 100px; font-size: 1.3em; font-weight: light; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center; line-height: 100px; letter-spacing: -1px; color: white; border: none; border-radius: 50%; background: #5a99d4; cursor: pointer; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5); } .pulse { animation: pulse 2s; } @-webkit-keyframes pulse { 0% { transform: scale(0.9)); } 70% { transform: scale(1); box-shadow: 0 0 0 50px rgba(90, 153, 212, 0); } 100% { transform: scale(0.9)); box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); } }

 <span class="pulsediv">Hot</span>