animate.css animating distance

Question

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

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>

Actually it's not that clear. The both of the animations (`fade` in `down`) are starting and ending at the same time. Do you want that it will be different? — Mosh Feu, Jan 05 '16 at 20:57

score 15 · Accepted Answer · answered Jan 05 '16 at 21:26

Just overwrite the default fadeInDown animation to what ever you like.
If you take a look at the source on GitHub - animate.css/source/fading_entrances/fadeInDown.css you'll see that it is just a simple @keyframes rule. Just copy that and change the transform property to your needs.

In your case like so:

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

Here is an example changing the fadeInDown animation to appear from left to right instead of going from top to bottom, which makes no sense at all, but just to show you that it can be changed.
You could as well do a custom build and add your own animations or a helper class to change the offset.

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

animate.css animating distance

1 Answers1

Linked