анимационное расстояние animate.css

Я использую animate.css для формы входа. Это работает, но не так, как я хочу, чтобы он работал. В настоящее время я использую fadeInDown но он исчезает с более длинного расстояния, которое я хочу. Он исчезает из windows просмотра или просто исчезает примерно в 20 пикселей . Я надеюсь, что в этом есть смысл.

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

  

Просто fadeInDown анимацию fadeInDown по умолчанию в fadeInDown для вас время.
Если вы посмотрите на источник на GitHub – animate.css / source / fading_entrances / fadeInDown.css, вы увидите, что это просто правило @keyframes . Просто скопируйте это и измените свойство transform на ваши нужды.

В вашем случае:

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

Вот пример, изменяющий анимацию fadeInDown чтобы появляться слева направо, а не идти сверху вниз, что не имеет никакого смысла, а просто показывает вам, что его можно изменить.
Вы также можете создать пользовательскую сборку и добавить свои собственные анимации или вспомогательный class для изменения смещения.

 @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; } }