animate.css animating distance

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/34618233/animate-css-animating-distance

标签

html

css

animation

animate.css