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

＆＃13;

@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;
  }
}

＆＃13;

<div id="login">
  <div class="row animated fadeInDown">
    <input type="text">
    <input type="password">
  </div>
</div>

＆＃13;

animate.css动画距离

1 个答案: