<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - animation-delay has limit in proceeded amount of seconds"
   href="https://bugs.webkit.org/show_bug.cgi?id=166962">166962</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>animation-delay has limit in proceeded amount of seconds
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 10
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>SVG
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>david.bruchmann&#64;gmail.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>zimmermann&#64;kde.org
          </td>
        </tr></table>
      <p>
        <div>
        <pre>if some CSS like this is used:

.circle-hours-r3730 { 
    stroke:rgba(0,0,180,0.6);
    animation: keyframes-hours-r3730 43200s infinite;  /* steps(12)*/
    animation-timing-function: linear;
    animation-delay:-21600s;
}

the animation is only working if the seconds for ANIMATION-DELAY cover round about half a day or less.
The detailed amount of accepted seconds seems not clear for me and changing randomly.
So in general the feature animation-delay is working but useless for larger amount of seconds.
As I don't have safari by my own I rely on customer reports. Before declining (hopefully not) please check all possible versions and frameworks.
The randomly changing accepted amount of seconds I discovered with Midori-browser on ubuntu.

An example SVG is this:

&lt;svg width=&quot;200&quot; height=&quot;200&quot; class=&quot;main-container&quot; version=&quot;1.1&quot; xmlns=&quot;<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>&quot;&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        svg.main-container{
            background:transparent;
        }
    &lt;/style&gt;
    &lt;svg class=&quot;circle-watch-content&quot; viewBox=&quot;0 0 10000 10000&quot; preserveAspectRatio=&quot;none&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .circle-watch-content .donuts {
                -webkit-transform-origin:5000px 5000px;
                -moz-transform-origin:5000px 5000px;
                transform-origin:5000px 5000px;

                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                transform: rotate(-90deg);
            }
            .circle-watch-content .donuts .donut circle {
                stroke-width:350;
                stroke-dashoffset:0;
                fill:transparent;
            }
            .circle-background { stroke:rgba(256,256,256,0.7); fill:transparent;}
        &lt;/style&gt;
        &lt;g class=&quot;donuts&quot;&gt;
            &lt;svg class=&quot;donut donut-r3730&quot;&gt;
                &lt;style type=&quot;text/css&quot;&gt;
                    &#64;keyframes keyframes-hours-r3730 {
                          0%      { stroke-dasharray:0 23437; }
                        100%      { stroke-dasharray:23436.28 23437; }
                    }
                    .circle-hours-r3730 { 
                        stroke:rgba(0,0,180,0.6);
                        animation: keyframes-hours-r3730 43200s infinite;  /* steps(12)*/
                        animation-timing-function: linear;
                        animation-delay:-21600s;
                    }
                &lt;/style&gt;
                &lt;circle cx=&quot;5000&quot; cy=&quot;5000&quot; r=&quot;3730&quot; class=&quot;circle-background circle-background-r3730&quot;&gt;&lt;/circle&gt;
                &lt;circle cx=&quot;5000&quot; cy=&quot;5000&quot; r=&quot;3730&quot; class=&quot;circle-hours circle-hours-r3730&quot; id=&quot;circle-hours-r3730&quot;&gt;&lt;/circle&gt;
            &lt;/svg&gt;
        &lt;/g&gt;
    &lt;/svg&gt;
&lt;/svg&gt;</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>