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 动画更改为从左到右而不是从上到下，这根本没有意义，只是为了向您展示它可以更改。
您也可以进行自定义构建并添加自己的动画或助手 class 来更改偏移量。

@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 动画距离

animate.css animating distance

html

css

animation

animate.css