Stop CSS animation after interaction

Question

Stop CSS animation after interaction

Navigation

#1 by (3 votes)
#2 by (-2 votes)

0

In the button below, I added a pulse animation to get the user's attention. I would like it after the user presses it, the animation stops. I was able 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>

css css3

asked by anonymous 12.07.2018 / 15:14

2 answers

-2

Use animation: press 2s forwards ; hence it does not loop.

12.07.2018 / 16:25

Difficulties in receiving JSON data in PHP WCF BytAarray Return Method gives error

score 3 · Accepted Answer

Using data-attributes to define the animation

Rather than getting stuck with a class with animation, I would do something quite different. I would define a data-animation attribute that defines, in the element, which animation it will have. To add the animation, simply 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>

So, when you press the link, the data-animation attribute of the element is removed, and therefore the animation is removed. For the hover it is the same logic, remembering that it will be necessary to redefine the attribute when the cursor is no longer on the button - if it is desired that the animation continues after hover ( which may conflict with click if not well treated).

Other elements may have the same animation

For other elements that have the same animation, just define 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 defined with the same technique

Just like other animations, you just have to change the value of the attribute. For example, a bounce animation:

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 ...