动画css幻灯片向下

Question

我正在使用中的animate.cs

https://animate.style/

尝试使用类slideInUp和slideInDown创建一些滑动动画，当我想使用一些slideInUp元素时，从下到上效果很好。我遇到的问题是，当我想要幻灯片时，向下它看起来就像整个元素向上溢出，动画中的整个元素是可见的，并与整个内容一起向下滚动。我所需要的只是他只是向下滑动，而不是从页面顶部，只是从他是的位置

以下是幻灯片的属性InDown

@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}

我只需要元素从当前位置向下滚动，而不是从页面顶部滚动，谢谢

这是工作小提琴https://jsfiddle.net/1fbwrqgp/1/

您将看到幻灯片div从页面顶部向下滑动，我想从父页面而不是从顶部滑动

Answer 1

以下内容如何？

@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.css"); /* Using a url */
.scroll-div{
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
top: 200px;
}

<div class='animate__animated animate__slideInDown scroll-div'>
</div>

发生了什么变化我把top: 200px放在.scroll-div上，使其出现在窗口顶部之后，还把height: 200px修改为height: 100px，使动画的更明显