Waypoint动画触发器不再起作用

如何解决Waypoint动画触发器不再起作用

我一直在着陆页上的网站“关于”部分工作。我希望页面上的图像以使用剪贴路径多边形制作的条纹动画出现。问题在于，动画是在加载页面时开始的，因此，仅当About页面中有70％位于屏幕上时，我才使用Waypoint来触发动画。它正在工作，但是后来我可能弄乱了代码，现在它不再工作了。有人可以检查一下并告诉我哪里出了问题吗？

HTML

<section
    id="about"
    class="about-area pt-50 pb-50"
    style="background: #231f20"
        >
            <div class="about-pg-img">
                    <img src="./assets/img/About.png" alt="">
            </div>
</section>

CSS

.about-pg-img {
    opacity: 0; 
}

.about-pg-img img {
    height: auto;
    width: 100%;
}

@keyframes polygon {
    0% {
    clip-path: polygon(0% 0%,0% 0%,20% 0%,38% 0%,64% 0%,81% 0%,100% 0%,100% 0%);
    }
    
    40% {
    clip-path: polygon(0% 0%,0% 100%,27% 100%,59% 100%,78% 100%,100% 0%);
    }

    75% {
    clip-path: polygon(0% 0%,44% 100%,100% 0%);
    }

    100% {
    clip-path: polygon(0% 0%,100% 100%,100% 0%);
    }
}

$('#about').waypoint(function() {
    $('.about-pg-img').css({
        animation: "polygon 1.5s",opacity: "1"
    });
    
},{offset: '70%'});

谢谢