animate.css 动画距离

Question

我正在为一个登录表单使用animate.css。它能正常工作，但不符合我的期望。目前我在使用fadeInDown，但它从比我想要的更远的位置淡入。它是从视口外淡入的，而不是只淡入约20像素。希望这有意义。 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>

- user1842315

---

你能发布一个 Fiddle 或 JSBin 吗？ - fauverism

实际上这并不是很清楚。两个动画（淡入和向下）同时开始和结束。您想让它们有所不同吗？ - Mosh Feu

Answer 1

只需覆盖默认的 fadeInDown 动画即可使用自定义动画。
如果您查看GitHub - animate.css/source/fading_entrances/fadeInDown.css 上的源代码，您会发现它只是一个简单的 @keyframes 规则。只需复制该规则并将 transform 属性更改为所需内容即可。

在您的情况下，如下所示：

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>

- DavidDomain