animate。css 滚动效果

animate.css 是一个非常流行的 CSS 动画库，使用它可以轻松实现各种炫酷的页面效果。 其中，滚动效果是 animate.css 中常用的一种效果，通过使用 animation 和 keyframes 带来不同的响应式效果。如下代码，我们可以实现在页面滚动到特定位置时，元素从底部弹出的效果。

.scroll-animation {
opacity: 0;
animation: slideInUp 0.5s ease-in-out forwards;
}
@keyframes slideInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-animation {
animation: none !important;
}
}

以上代码中的 .scroll-animation 类，是我们需要实现滚动效果的元素，使用 opacity 属性隐藏了元素，animation 属性触发 slideInUp 动画，并且使用 forwards 参数让元素在动画结束时保持最终状态（即可见）。

@keyframes 中定义了 slideInUp 动画，从页面底部向上滑入元素。0% 和 100% 表示动画起止时刻，transform 属性是用来改变元素位置、形状等的 CSS 属性，translate3d(0, 100%, 0) 表示将元素移动到页面底部。这样动画播放时就会从底部弹出。

最后，为了增加页面的可访问性，我们使用 @media (prefers-reduced-motion: reduce) 媒体查询来禁止动画，在用户设备设置中开启了 "减少动态界面" 的选项时，仍然可以良好的展示页面。

查看更多关于animate。css 滚动效果的详细内容...