animate.css distancia de animación

Estoy usando animate.css para un formulario de inicio de sesión. Funciona, excepto de la manera que yo quiero que funcione. Actualmente estoy usando fadeInDown pero se desvanece desde una distancia más larga que yo quiero. Se desvanece desde fuera de la ventana gráfica en lugar de desvanecerse en unos 20px . Espero que tenga sentido.

https://daneden.github.io/animate.css/

  

Simplemente sobrescriba la animación predeterminada de fadeInDown a su gusto.
Si echas un vistazo a la fuente en GitHub – animate.css / source / fading_entrances / fadeInDown.css , verás que es simplemente una regla de @keyframes . Solo copie eso y cambie la propiedad de transformación a sus necesidades.

En tu caso, así:

 transform: translate3d(0, -20px, 0); 

Aquí hay un ejemplo que cambia la animación de fadeInDown para que aparezca de izquierda a derecha en lugar de ir de arriba a abajo, lo cual no tiene ningún sentido, pero solo para mostrarle que se puede cambiar.
También podría hacer una comstackción personalizada y agregar sus propias animaciones o una clase de ayuda para cambiar el desplazamiento.

 @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'); @keyframes fadeInDown { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }