0

No botão abaixo, adicionei uma animação pulse para chamar a atenção do usuário. Gostaria que após o usuário pressioná-lo, a animação parasse. Consegui fazer para que a animação parasse quando o cursor está sobre o botão, mas mesmo após pressioná-lo a animação continua.

Como posso parar a animação após o usuário pressionar o botão?

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

5
  • sim a hover mesmo, porém não funciona, ainda não achei o erro rs.
    – sev3ndie
    Commented 12/07/2018 às 13:21
  • Remover a classe de animação não resolve? Commented 12/07/2018 às 13:22
  • Anderson é exatamente o pulse quero que ele pare após abrir a interação.
    – sev3ndie
    Commented 12/07/2018 às 13:23
  • Qual interação? Sua pergunta não está muito clara, ou então está faltando código na sua pergunta para sabermos qual é essa interação... Aparentemente ao fazer o hover a animação para. Mas se clicar no btn parece que depois o hover para de funcionar...
    – hugocsl
    Commented 12/07/2018 às 14:08
  • E na verdade ao clicar no BTN gostaria que o pulse parasse.
    – sev3ndie
    Commented 12/07/2018 às 14:22

2 Respostas 2

3

Utilizando data-attributes para definir a animação

Ao invés de ficar preso a uma classe com a animação, eu faria um tanto quanto diferente. Eu definiria um atributo data-animation que define, no elemento, qual animação ele possuirá. Para adicionar a animação, basta adicionar o atributo e, de forma semelhante, para parar com a animação, basta remover o atributo. Você consegue fazer isso dinamicamente com JavaScript - e de forma independente da classe que aplica o estilo ao elemento.

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

Assim, quando pressionado o link, é removido o atributo data-animation do elemento e, consequentemente, é removido a animação. Para o hover é a mesma lógica, lembrando que será necessário redefinir o atributo quando o cursor não estiver mais sobre o botão - se for desejado que a animação continue após o hover (o que pode conflitar com o click se não bem tratado).

Outros elementos podem possuir a mesma animação

Para outros elementos que possuírem a mesma animação, basta definir o mesmo atributo:

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

Outras animações podem ser definidas com a mesma técnica

Assim como se for definidas outras animações, bastaria alterar o valor do atributo. Por exemplo, uma animação 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>

E assim para qualquer animação...

-2

Usa animation: pulse 2s forwards; daí ele não fica em loop.

3
  • 1
    E qual seria a interação que faz parar a animação neste caso?
    – Woss
    Commented 12/07/2018 às 14:26
  • aí vai do que ele ta querendo fazer, basta chamar via javascript, ou deixar depois dentro de um hover mesmo, ao chamar a animação, ela vai aparecer e depois vai parar. Commented 12/07/2018 às 14:30
  • Fernando não deu certo ;/
    – sev3ndie
    Commented 12/07/2018 às 14:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .