Stop CSS animation after interaction

In the button below, I added an animation pulse to get the user's attention. I would like that after the user presses it, the animation stops. I managed to make the animation stop when the cursor is over the button, but even after pressing it the animation continues.

How can I stop the animation after the user presses the button?

.JanelaWhatsAberta {
  border-width: 3px !important;
  width: 278px;
  background-color: #15AC95 !important;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  height: 37px;
  bottom: 14px;
  z-index: 99999999;
  margin-left: 18px;
  border-bottom-left-radius: 19px;
  border-bottom-right-radius: 19px;
  border-top-right-radius: 19px;
  border-top-left-radius: 19px;
}

.JanelaWhatsAberta.yp_onscreen {
  animation-duration: 1s;
  animation-name: pulse;
  animation-delay: 0s;
}

.WhatsCel.Whatsclose {
  background-color: #15AC95 !important;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

#popcompany .WhatsCel {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.JanelaWhatsAberta {
  margin: 15px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 19%;
  background: #transparent;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 2s infinite;
}

.JanelaWhatsAberta:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes pulse {
  10% {
    -moz-box-shadow: 0 0 0 0 #15AC95;
    box-shadow: 0 0 0 0 #15AC95;
  }
  80% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 15px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

.JanelaWhatsAberta {
  border-width: 3px !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-left: 18px;
  z-index: 99999999;
  bottom: -5px;
  height: 37px;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  background-color: #15AC95 !important;
  width: 250px;
}

.JanelaWhatsAberta.yp_onscreen {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-name: bob;
}

.WhatsCel.Whatsclose {
  background-color: #15AC95 !important;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

#popcompany .WhatsCel {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.btn-toggle {
  display: none;
}

.btn2-toggle {
  display: none;
}

@media screen and (max-width: 580px) {
  {
    display: none;
  }
  .btn-toggle {
    display: block;
  }
}

@media screen and (min-width: 580px) {
  {
    display: none;
  }
  .btn-toggle {
    display: block;
  }
}

</style><style>#popcompany {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0px;
  margin-right: 10px;
  z-index: 9999999999;
  background-image: url();
  width: 280px;
  height: 350px;
}

.JanelaWhatsAberta {
  background-image: url();
  background-color: #15AC95;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 99999;
  width: 280px;
  height: 35px;
  margin-right: 10px;
}

.WhatsIframe {
  margin-left: 0px;
  margin-top: 35px;
  width: 280px;
  height: 400px;
  overflow: hidden;
  border-width: 0px;
}

.WhatsCel.Whatsclose {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 200ms;
  font-size: 12px;
  font-family: Verdana, Sans-Serif;
  text-decoration: none;
  background-image: url();
  background-color: #15AC95;
  width: 280px;
  height: 35px;
}
<main>
  <div id="popcompany" style="display: none;">
    <div class="WhatsCel Whatscont">
      <a class="Whatsclose" onclick="document.getElementById('popcompany').style.display='none';">
      </a>
      <iframe class="WhatsIframe" src="">
                   </iframe>
    </div>
  </div>
  <a class="JanelaWhatsAberta" onclick="document.getElementById('popcompany').style.display='block';"></a>
  </div>
</main>
Author: Woss, 2018-07-12
Source

2 answers

Using data-attributes to set the animation

Instead of getting stuck in a class with the animation, I would do somewhat differently. I would define an attribute data-animation that defines, in the element, which animation it will possess. To add the animation, just add the attribute, and similarly to stop the animation, just remove the attribute. You can do this dynamically with JavaScript-and independently of the class that applies the style to the element.

[data-animation='pulse'] {
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes pulse {
  10% {
    -moz-box-shadow: 0 0 0 0 #15AC95;
    box-shadow: 0 0 0 0 #15AC95;
  }
  80% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 15px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<a
  href="#!" 
  data-animation='pulse'
  onClick="this.removeAttribute('data-animation')"
>Teste</a>

Thus, when the link is pressed, the data-animation attribute of the element is removed and, consequently, the animation is removed. For the hover it is the same logic, remembering that you will need to reset the attribute when the cursor is no longer over the button - if you want the animation to continue after the hover (which can conflict with the click if not well treated).

Other elements can have the same animation

For other elements that have the same animation, simply set the same attribute: 

[data-animation='pulse'] {
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes pulse {
  10% {
    -moz-box-shadow: 0 0 0 0 #15AC95;
    box-shadow: 0 0 0 0 #15AC95;
  }
  80% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 15px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<a data-animation='pulse'>Teste</a>
<a data-animation='pulse'>Teste</a>
<a data-animation='pulse'>Teste</a>

Other animations can be set with the same technique

Just as if other animations are defined, it would be enough to change the value of the attribute. For example, an animation bounce: 

body {
  margin-top: 50px;
}

[data-animation='bounce'] {
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
<div href="#!" data-animation="bounce">Teste</div>

And so for any animation...

 3
Author: Woss, 2018-07-12 15:08:48

Uses animation: pulse 2s forwards; hence it does not Loop.

 -2
Author: Fernando Dias Motta, 2018-07-12 14:25:10