title: CSS keyframes (animation) not functioning in safari
body: <p>I am currently facing some issues with CSS's @keyframes, as they do not seem to work to work on Safari browser. They are working fine on Chrome, though.</p>
  
  <p>I have checked with the list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions" rel="nofollow noreferrer">WebKit CSS extensions</a>, but I do not seem to have any luck with it.</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-css lang-css prettyprint-override"><code>.app-loading {
  
  }
  
  .app-loading .spinner {
    height: 200px;
    width: 200px;
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 10;
    margin: auto;
  }
  
  .app-loading .spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #ddd;
  }
  
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes rotate {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
  
  @-webkit-keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="app-loading"&gt;
    &lt;svg class="spinner" viewBox="25 25 50 50"&gt;
      &lt;circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have also created a demo on <a href="https://jsfiddle.net/2srm9dtL/" rel="nofollow noreferrer">JSfiddle</a>.</p>
  
  <p>I understand there are many similar questions out there, but none of them seem to be solving the issue I am facing right now:</p>
  
  <p>1) <a href="https://stackoverflow.com/questions/30870215/css-keyframe-animations-safari">CSS Keyframe animations safari</a> </p>
  
  <p>2) <a href="https://stackoverflow.com/questions/9211261/css3-animation-not-working-in-safari">CSS3 animation not working in safari</a></p>
  
  <p>Would appreciate some help over here. Thanks!</p>
  
  <hr>
  
  <h1>EDIT 1:</h1>
  
  <p>What other things I've tried - replacing the <code>-webkit-animation</code> shorthand with the below </p>
  
  <pre><code>-webkit-animation-name: rotate;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: infinite;
  </code></pre>