2

.btn_animated{
    width: 18%;
  
}
.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);
      }
  }
<form action="accion.php" method="post">
<input type="text" name="pass"  >
<input type="submit" value="Enviarlo" class="btn_animated">
</form> 

Hola, este es mi archivo.html lo que quiero es que si pulso enter (submit) en el input de texto el boton "Enviarlo" haga la misma animacion como si le hubiera hecho clic en el

en resumen: necesito que tanto como al pulsar enter en el input o al pulsar el boton haga la misma animacion el boton

1 respuesta 1

2

Solo hay que escuchar cuando el formulario sea enviado y pasar foco al botón:

// Obtener todos los formularios
let forms = document.querySelectorAll('form');

// Recorrer formularios para asignar evento a cada uno
forms.forEach(form => form.addEventListener('submit', function(e) {
    // Animar botón enviándole el foco
    e.target.querySelector('.btn_animated').focus();
}));
.btn_animated{
    width: 18%;
  
}
.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);
      }
  }
<form action="accion.php" method="post">
<input type="text" name="pass"  >
<input type="submit" value="Enviarlo" class="btn_animated">
</form>

<form action="accion.php" method="post">
<input type="text" name="pass"  >
<input type="submit" value="Enviarlo" class="btn_animated">
</form>

<form action="accion.php" method="post">
<input type="text" name="pass"  >
<input type="submit" value="Enviarlo" class="btn_animated">
</form>

2
  • Amigo gracias era justo lo que buscaba, pero tengo un pequeñlo problema, si agrego otro form no lo hace con el segundo si no que solo funciona en el primer form y no en los demas como hago en ese caso? gracias de antemano
    – jkjul
    el 27 ago. 2020 a las 15:19
  • Listo, actualicé la respuesta.
    – Triby
    el 27 ago. 2020 a las 15:49

Tu Respuesta

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

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