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

Question

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> 
 
<div id="login"> 
 
    <div class="row animated fadeInDown"> 
 
    <img src="logo.png"/> 
 
    <input type="text"> 
 
    <input type="password"> 
 
    </div> 
 
</div>

Answer 1

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

В вашем случае, как так:

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

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

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

<div id="login"> 
 
    <div class="row animated fadeInDown"> 
 
    <input type="text"> 
 
    <input type="password"> 
 
    </div> 
 
</div>