css - CSS 动画在 safari 上不起作用，但在 chrome 上很好

Question

我设计了一个包含许多动画的页面，并且在 chrome 和 firefox 等浏览器上都运行良好，但是当在 safari (MAC) 和 safari(Windows) 上打开相同的内容时，它不会显示动画。我没有得到，确切的问题是什么。

我添加了包含三个动画animation1、animation2 和animation3 的html。我只添加了animation2 css。其余动画几乎相同。

这是HTML： -

    $(document).on("scroll", function () {
        if (isScrolledIntoView1($elem1, $window1)) {
            $elem1.addClass("animate1")
        }
    });
    
    $(document).on("scroll", function () {
        if (isScrolledIntoView($elem, $window)) {
            $elem.addClass("animate2")
        }
    });
    
    $(document).on("scroll", function () {
        if (isScrolledIntoView2($elem2, $window2)) {
            $elem2.addClass("animate3")
        }
    });
    
    
    
    	var $window = $(window);
        var $elem = $(".animation2")
    
        function isScrolledIntoView($elem, $window) {
            var docViewTop = $window.scrollTop();
            var docViewBottom = docViewTop + $window.height();
    
            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();
    
            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }
    
    
    	var $window1 = $(window);
        var $elem1 = $(".animation1")
    
        function isScrolledIntoView1($elem1, $window1) {
            var docViewTop1 = $window1.scrollTop();
            var docViewBottom1 = docViewTop1 + $window1.height();
    
            var elemTop1 = $elem1.offset().top;
            var elemBottom1 = elemTop1 + $elem1.height();
    
            return ((elemBottom1 <= docViewBottom1) && (elemTop1 >= docViewTop1));
        }
    
    	var $window2 = $(window);
        var $elem2 = $(".animation3")
    
        function isScrolledIntoView2($elem2, $window2) {
            var docViewTop2 = $window2.scrollTop();
            var docViewBottom2 = docViewTop2 + $window2.height();
    
            var elemTop2 = $elem2.offset().top;
            var elemBottom2 = elemTop2 + $elem2.height();
    
            return ((elemBottom2 <= docViewBottom2) && (elemTop2 >= docViewTop2));
        }

.animation2.animate2 {
                animation-name: pulse2;
                animation-duration: 2s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-delay: 0s;

                -webkit-animation-name: pulse2;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-fill-mode: forwards;
                -webkit-animation-delay: 0s;
        }
        @keyframes pulse2 {
            0% {
                position: relative;
                top: -500px;
                left: 100px;
                background-color: #94D6E2;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 750px;
                height: 300px;
                margin-top: 150px;
                z-index: -1;
            }
            100% {
                position: relative;
                top: -600px;
                left: 100px;
                background-color: #94D6E2;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 850px;
                height: 400px;
                margin-top: 150px;
                z-index: -1;
            }
        }

        @-webkit-keyframes pulse2 {
            0% {
                position: relative;
                top: -500px;
                left: 100px;
                background-color: #94D6E2;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 750px;
                height: 300px;
                margin-top: 150px;
                z-index: -1;
            }
            100% {
                position: relative;
                top: -600px;
                left: 100px;
                background-color: #94D6E2;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 850px;
                height: 400px;
                margin-top: 150px;
                z-index: -1;
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="about-slide1">
    <div class="animation3" style="background-image: url('img/01.png');"></div>

    <div class="animation1">

            <div class=" about-slide1-position">
                <h3 class="pt-4 about-slide1-title">Custom</h3>
                <hr class="about-slide1-hr">
                <h5 class="px-5" >Top culinary chefs from across the country have prepared a highly delectable keto menu, comprising of dishes such as Hyderabadi Biryani, Butter Chicken, Thin Crust Pizza, Pasta and Chocolate Mousse amongst others.</h5>
            </div>

            <div class="tech-slideshow">
                <div class="mover-1" style="background-image: url(img/04.png);background-size: cover;"></div>
            </div>



    </div>

    <div class="animation2"></div>
</div>

		<div class="animation2"></div>
    </div>

标签： csssafari