<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@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>david.bruchmann@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>zimmermann@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:
<svg width="200" height="200" class="main-container" version="1.1" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>">
<style type="text/css">
svg.main-container{
background:transparent;
}
</style>
<svg class="circle-watch-content" viewBox="0 0 10000 10000" preserveAspectRatio="none">
<style type="text/css">
.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;}
</style>
<g class="donuts">
<svg class="donut donut-r3730">
<style type="text/css">
@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;
}
</style>
<circle cx="5000" cy="5000" r="3730" class="circle-background circle-background-r3730"></circle>
<circle cx="5000" cy="5000" r="3730" class="circle-hours circle-hours-r3730" id="circle-hours-r3730"></circle>
</svg>
</g>
</svg>
</svg></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>