title: CSS animation is not working on safari but good on chrome
body: <p>I have designed a page which contains many animations and all are working good on browsers like chrome and firefox, but when the same is opened on the safari (MAC) and safari(Windows), it doesn't show the animation. I am not getting, what's the exact problem.</p>
  
  <p>I have added the html which contains three animations animation1, animation2 and animation3. I have only added the animation2 css. And the remaining animations are almost same.</p>
  
  <p>Here is Html:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(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 &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= 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 &lt;= docViewBottom1) &amp;&amp; (elemTop1 &gt;= 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 &lt;= docViewBottom2) &amp;&amp; (elemTop2 &gt;= docViewTop2));
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="about-slide1"&gt;
      &lt;div class="animation3" style="background-image: url('img/01.png');"&gt;&lt;/div&gt;
  
      &lt;div class="animation1"&gt;
  
              &lt;div class=" about-slide1-position"&gt;
                  &lt;h3 class="pt-4 about-slide1-title"&gt;Custom&lt;/h3&gt;
                  &lt;hr class="about-slide1-hr"&gt;
                  &lt;h5 class="px-5" &gt;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.&lt;/h5&gt;
              &lt;/div&gt;
  
              &lt;div class="tech-slideshow"&gt;
                  &lt;div class="mover-1" style="background-image: url(img/04.png);background-size: cover;"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
      &lt;div class="animation2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="animation2"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>