animate.css animating distance
<p>I am using <code>animate.css</code> for a login form. It works except not the way I want it to work. Currently I am using <code>fadeInDown</code> but it fades in down from a longer distance that I want. It fades in from off the viewport versus just fading in about <strong>20px</strong>. I hope that makes sense. </p>

<p><a href="https://daneden.github.io/animate.css/" rel="noreferrer">https://daneden.github.io/animate.css/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /&gt;
&lt;div id="login"&gt;
  &lt;div class="row animated fadeInDown"&gt;
    &lt;img src="logo.png"/&gt;
    &lt;input type="text"&gt;
    &lt;input type="password"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>