animate.css动画距离

我使用animate.css作为登录表单。它的工作原理除了不是我希望它工作的方式。目前我正在使用fadeInDown，但它会从我想要的更远的距离中褪色。它从视口中渐渐消失，而只是消失在大约20px。我希望这是有道理的。animate.css动画距离

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>

来源

2016-01-05 user1842315

您可以发布一个小提琴或jsbin？ – fauverism

其实它不是很清楚。两个动画（''淡入'在'下'）开始和结束在同一时间。你想要它会不同吗？ –

只是覆盖默认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>

来源

2016-01-05 21:26:31 DavidDomain

animate.css动画距离

回答

相关问题