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