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 https://jsfiddle.net/mrgiba/qtco0dcr/ According to the CSS Animation specification (http://www.w3schools.com/css/css3_animations.asp), 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."
(In reply to comment #0) > 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 > > https://jsfiddle.net/mrgiba/qtco0dcr/ I can reproduce, thanks the test case. > According to the CSS Animation specification > (http://www.w3schools.com/css/css3_animations.asp), an animation that didn't w3schools.com :|
Wrong link to CSS animations spec... The correct one is http://www.w3.org/TR/css3-animations/ My appologies
<rdar://problem/28213692>
Trivially, this is just about pausing an animation that hasn't started yet (pause before the delay time).
In AnimationBase::getElapsedTime() we have to handle the case where m_startTime == 0 but m_pauseTime is non-zero.
This now behaves as expected.