css中怎么给div设置一个从上到下的滚动动画
在CSS中，要给div设置一个从上到下的滚动动画，你可以使用@keyframes规则来定义动画，然后将动画应用到div上。以下是一个简单的例子：
/* 定义动画 */
@keyframes scrollFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* 应用动画到div */
.scroll-animation {
animation: scrollFromTop 2s ease-in-out forwards;
transform: translateY(-100%); /* 开始时div位于上方 */
opacity: 0; /* 开始时透明度为0 */
}接下来，在HTML中，给需要滚动动画的div添加scroll-animation类：
<div class="scroll-animation">这是需要滚动的内容</div>当div被添加到页面上时，它会从上到下滚动出现。动画时长为2秒，使用ease-in-out缓动函数，并且在动画完成后保持最终状态（forwards）。
评论已关闭