Javascript 如何使CSS文本动画仅在用户向下滚动到该页面时出现

p、 amt基本上是我的关于我的摘要，但是关于我的部分在我的网页底部，我希望文本只在用户向下滚动到该部分时滑动，而不是网页加载时出现的动画

p.amt {
            position: relative;
            color: white;
            bottom: var(--vamt);
            font-size: 20px;
            font-family: "Comic Sans MS", cursive, sans-serif;
            animation: amtslide 4s 1;
            left: 50px;
        }

    @keyframes amtslide {
            0% {text-align:left; left:-1500px;}
            25%{text-align:left; left:-1000px;}
            50% {text-align:left; left:-500px;}
            100% {bottom: var(--vamt); left: 50px;}
        }

---

这可以使用

将此添加到index.html：

<script src="js/jquery.waypoints.min.js"></script>

---

偏移量

百分比是指触发动画的窗口高度的百分比。当元素顶部距离窗口顶部75%时，将触发此特定偏移。

这是否回答了您的问题？

$(document).ready(function() {
$('.p.amt').waypoint(function() {
$('.p.amt').css({
animation: "amtslide 4s 1",
opacity: "1"
});
}, { offset: '75%' });