<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 - Pausing not showing current frame, when multiple animations are defined for same CSS selector - Safari only"
href="https://bugs.webkit.org/show_bug.cgi?id=152504">152504</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Pausing not showing current frame, when multiple animations are defined for same CSS selector - Safari only
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</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>Animations
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>mrgiba@bol.com.br
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Define two or more animation names for the same CSS selector, making sure the delay for each animation is higher than the duration of the previous animations
When the series of animations start, a pause always displays the last frame of the last animation, rather than the current frame of the current animation
A running example that surfaces the issue, having a series of three animations to change the background color
<a href="https://jsfiddle.net/mrgiba/qtco0dcr/">https://jsfiddle.net/mrgiba/qtco0dcr/</a>
According to the CSS Animation specification (<a href="http://www.w3schools.com/css/css3_animations.asp">http://www.w3schools.com/css/css3_animations.asp</a>), an animation that didn't start should not have any effect in the screen:
"An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation."</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>