animate.css 动画距离

Posted 2023-03-06

【中文标题】animate.css 动画距离

【英文标题】：animate.css animating distance

【发布时间】：2016-04-09 15:56:36

【问题描述】：

我正在使用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>

【问题讨论】：

你能发一个fiddle或jsbin吗？

其实还不是很清楚。两个动画（down 中的fade）同时开始和结束。你希望它与众不同吗？

【参考方案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>