Stop CSS animation after interaction

Asked

Viewed 557 times

0

On the button below, I added an animation Pulse to get the user’s attention. I would like the animation to stop after the user presses it. 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 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 animation

  • yes to Hover even, but it doesn’t work, I haven’t found the error rs.

  • Removing the animation class does not resolve?

  • Anderson is exactly the Ulse want it to stop after opening the interaction.

  • What interaction? Your question is not very clear, or is your question missing code to know what this interaction is... Apparently when doing Hover the animation stops. But if you click on btn it seems that after Hover stops working...

  • And actually clicking on the BTN would like Pulse to stop.

2 answers

3


Using data-Attributes to define the animation

Instead of being stuck in a class with animation, I would do something quite different. I would define an attribute data-animation which defines, in the element, which animation it will possess. To add the animation, simply add the attribute and, similarly, to stop the animation, simply 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 attribute is removed data-animation of the element and, consequently, animation is removed. For the Hover is the same logic, remembering that it will be necessary to reset the attribute when the cursor is no longer on the button - if the animation is desired to continue after the Hover (which may conflict with click if not treated well).

Other elements may have the same animation

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

Just like if other animations are defined, simply 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...

-2

Uses Animation: Pulse 2s forwards; then it doesn’t loop.

  • 1

    And what would be the interaction that stops the animation in this case?

  • Then it goes from what he wants to do, just call via javascript, or leave after within a same time, when calling the animation, it will appear and then it will stop.

  • Fernando didn’t work out ;/

Browser other questions tagged css css3 animation

You are not signed in. Login or sign up in order to post.