title: Animation-play-state not playing nice with animation-delay in Safari
body: <p>I am working on modifying <a href="http://dabblet.com/gist/66e1e52ac2a44ad87aa4" rel="nofollow">this example</a> in some ways for use in my application. This works awesome in Chrome and FF, but in Safari, not so much. If you look you will see in Chrome the pie charts look as expected, but in Safari they are all "whole".</p>
  
  <p>The css (copied from the example) looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pie {
   display: inline-block;
   position: relative;
   width: 100px;
   line-height: 100px;
   border-radius: 50%;
   background: yellowgreen;
   background-image: linear-gradient(to right, transparent 50%, #655 0);
   color: transparent;
   text-align: center;
  }
  
  @keyframes spin {
   to { transform: rotate(.5turn); }
  }
  @keyframes bg {
   50% { background: #655; }
  }   
  
  .pie::before {
   content: '';
   position: absolute;
   top: 0; left: 50%;
   width: 50%; height: 100%;
   border-radius: 0 100% 100% 0 / 50%;
   background-color: inherit;
   transform-origin: left;
   animation: spin 50s linear infinite, bg 100s step-end infinite;
   animation-play-state: paused; &lt;-- Safari's issue
   animation-delay: inherit;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I noted the second-to-last line in the code to identify the problem. When <code>animation-play-state</code> is set to <code>paused</code>, Safari will not put the animation in the initial condition set by <code>animation-delay</code>. Chrome and FF seem to look at the <code>animation-delay</code>, put the animation in the state it would be at that delay, and then stay paused.</p>
  
  <p>Is there a workaround I am missing where Safari will put the animation in the initial condition and then stay paused?</p>