Jquery 网站动画在不同的计算机和浏览器上具有不同的帧速率

我在学校学习网络开发，我们现在有一个项目，我们正在制作一个基本的登录页。我想让它更别致一点，并添加一些动画。我使用CSS关键帧和jQuery

但我有个问题。在我的家用电脑（pc）上，无论是chrome还是firefox，动画都非常流畅。但在我的学校电脑（MacBookPro 2015）上，它们在chrome上有点落后，但没关系。在Safari中，这就像2 FPS，你们知道原因吗

jQuery代码：

$(document).ready(function() {
$(window).scroll( function(){

        //fade in
        $('.watch1-text1, .watch1-text2, .watch2-text2, .watch3-text1').each( function(i){

            let bottom_of_object = $(this).offset().top + $(this).outerHeight();
            console.log(bottom_of_object);
            let bottom_of_window = $(window).scrollTop() + $(window).height();
            console.log(bottom_of_window);


            if( bottom_of_window > bottom_of_object - 500){

                $(this).stop(true, false).animate({'opacity':'1'},500);    
            }

        }); 

    });
//scroll
$("#learn-btn").click(function() {
    $('html, body').stop(true, false).animate({
        scrollTop: $(".watch-1").offset().top
    }, 750)
    return false
})

$("#more-btn-2").click(function() {
    $('html, body').stop(true, false).animate({
        scrollTop: $(".watch-2").offset().top
    }, 750)
    return false
})

$("#more-btn-3").click(function() {
    $('html, body').stop(true, false).animate({
        scrollTop: $(".watch-3").offset().top
    }, 750)
    return false
})  
})

Css关键帧示例：

@keyframes fade-in-logo {
     0%    { opacity: 0; margin-bottom: 50px; }
     100%  { opacity: 1;  margin-bottom: 0px; }
}

---

请更具体一点，什么是滞后？fadeIn或scrolling？@mr.void淡入和滚动的帧速率都非常差。所以它看起来很起伏。请更具体一点，什么是滞后？fadeIn或scrolling？@mr.void淡入和滚动的帧速率都非常差。因此，它看起来非常起伏。