Javascript 当元素通过滚动可见时，如何运行css@keyframes

我在控制css动画方面有一个很大的问题，我希望它们在元素在屏幕上可见时启动。 确切地说，我正在制作一个具有总体高度的站点，如8000像素，并且具有动画的元素非常低，因此要查看此元素，我需要将页面向下滚动到它。问题是动画在页面加载完成时开始，所以每次我向下滚动到此元素时，动画已经结束

我一直在寻找有关堆栈溢出、youtube等的解决方案，但不幸的是我失败了，我找到并尝试实现的每个解决方案都不起作用，所以我几乎要放弃了

如何在元素可见时运行此动画？ 有人能帮我用javascript编写正确的代码吗

有点离题，我正在创建我的第一个网站，不幸的是，我在学校或大学里没有上过任何关于html、css或javascript/jquery编码的严肃课程，所以请原谅一些非专业的非最佳类或id名称和解决方案P Fortuntly html和css很容易学习，所以我没有遇到这样的问题，但javascript似乎是一种硬语言：/

下面的HTML元素：

<article id="pasek">
  <div id="border_left" class="tekst"></div>
  <div id="litery" class="tekst">
    <p class="rok_założenia">2020</p>
    <p class="tekst_rok_założenia">Rok założenia</p>
  </div>
  <div id="border_right" class="tekst"></div>
</article>

---

我尝试过的Javascript：

原件：

 <script>
        $(document).ready(function(){
            $('.dummy').viewportChecker({
                callbackFunction: function(elem, action){
                    setTimeout(function(){
                        elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                    },500);
                },
                scrollBox: ".scrollwrapper"
            });
        });
    </script>

$（文档）.ready（函数（）{
$（'.dummy'）.viewportChecker({
callbackFunction：函数（元素、动作）{
setTimeout（函数（）{
html（（action==“add”）？“500毫秒超时的回调：添加的类”：“500毫秒超时的回调：删除的类”）；
},500);
},
scrollBox:“.scrollwrapper”
});
});

使用我的更改（类名称、id）

$（文档）.ready（函数（）{
$（'.tekst'）.viewportChecker({
callbackFunction：函数（元素、动作）{
setTimeout（函数（）{
html（（action==“add”）？“500毫秒超时的回调：添加的类”：“500毫秒超时的回调：删除的类”）；
},500);
},
滚动框：“帕塞克”
});
});

我也一直在尝试实施这些解决方案： 有一些文章介绍了如何使用jQuery实现这一点
我修改了一些关于IDs的代码示例，使文章更加灵活，并制作了关于它的实时预览

如果您想了解更多有关JavaScript的信息，请查看udemy、freecodecamp、frontendmasters、pluralsight等课程

---

您能提供您尝试过的相关javascript吗？在这里，我已经在下面发布了。

 <script>
        $(document).ready(function(){
            $('.dummy').viewportChecker({
                callbackFunction: function(elem, action){
                    setTimeout(function(){
                        elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                    },500);
                },
                scrollBox: ".scrollwrapper"
            });
        });
    </script>

<script>
        $(document).ready(function(){
            $('.tekst').viewportChecker({
                callbackFunction: function(elem, action){
                    setTimeout(function(){
                        elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                    },500);
                },
                scrollBox: "#pasek"
            });
        });
    </script>