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

Question

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

但我有一个问题。在我的家用电脑（PC）上，无论是chrome还是firefox，动画都非常流畅。但是在我的学校电脑上（macbook pro 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; }
}