2

Tengo un botón el cual le tengo una animación con CSS3 la cual entra en efecto cada vez que el botón tiene el foco.

Lo que hace la animación es dar un pequeño rebote al botón, en su misma posición que se encuentre sin desplazarlo.

Lo que busco es que por cada vez que se haga clic en el botón se active la animación como si cada clic activase el foco en el botón.

A continuación dejo un ejemplo de como tengo animado el botón.

.btn_animated2{
  background-color: rgba(0,0,0,0.5);
  color: white;
  border-color: black;
  height: 9mm;
  width: 30%;
  outline-style: none !important;
  margin-left: 2mm;
}
.btn_animated2:active{
  -webkit-animation: jello-horizontal 0.5s both;
          animation: jello-horizontal 0.5s both;
}
.btn_animated{
  background-color: rgba(0,0,0,0.5);
  color: white;
  border-color: black;
  height: 8mm;
  width: 25%;
  outline-style: none !important;
  margin-left: 2mm;
}
.btn_animated:focus{
  -webkit-animation: jello-horizontal 0.5s both;
          animation: jello-horizontal 0.5s both;
}
@-webkit-keyframes jello-horizontal {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      }
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
      }
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
      }
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
      }
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
      }
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
      }
      100% {
        -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      }
  }
<b>Con :focus</b><br><br>
<button class="btn_animated">CLICKEAME!!</button><br><br>
<b>Con :active (manteniendo un poco el mouse por cada clic)</b><br><br>
<button class="btn_animated2">CLICKEAME!!</button>

Si uso :active para animar el botón funciona, pero solo si el mouse esta posicionado sobre el botón, lo cual si se mueve se detiene la animación.

Es por eso que uso :focus para animar el botón.

Pero como expliqué me gustaría lograr el efecto siempre que se haga click en el botón, es decir, cada clic activará la animación en el botón, independientemente si se deja posicionado el mouse sobre el botón o no.

1 respuesta 1

3

Usa el evento click y simplemente elimina y agrega nuevamente la clase que inicia la animación. Fíjate que le agrego 0.1s de delay para esperar por el repintado del documento.

const btn = document.querySelector('.btn_animated')
btn.addEventListener('click', () => {
  btn.classList.remove('animate')
  setTimeout(() => btn.classList.add('animate'), 100)
})
.btn_animated{
  background-color: rgba(0,0,0,0.5);
  color: white;
  border-color: black;
  height: 8mm;
  width: 25%;
  outline-style: none !important;
  margin-left: 1cm;
  margin-top: 1cm;
}
.btn_animated.animate {
  -webkit-animation: jello-horizontal 0.5s both;
          animation: jello-horizontal 0.5s both;
}
@-webkit-keyframes jello-horizontal {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      }
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
      }
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
      }
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
      }
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
      }
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
      }
      100% {
        -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
      }
  }
<button class="btn_animated">CLICKEAME</button>

2
  • Gracias era lo que trataba de lograr.
    – M4uriXD
    Commented el 8 nov. 2018 a las 21:12
  • Increible respuesta .. genial, me ayuda a mi tambien
    – frojas
    Commented el 4 feb. 2022 a las 15:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.