animate.css动画距离

Question

我使用animate.css作为登录表单。它的工作方式，除了我希望它的工作方式。目前我正在使用fadeInDown，但它会从我想要的更远的距离逐渐消失。它从视口外逐渐消失，而在20 It 中则逐渐消失。我希望这是有意义的。

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动画到任何你喜欢的东西。

如果您查看一下入口/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>

​