Per spec: “A negative delay is valid. Similar to a delay of 0s, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its active duration.” —http://w3.org/TR/css-animations/#animation-delay-property
Testcase works in Gecko, IE and Chrome and displays the boxes in a range of colors from red to yellowgreen. In Safari, all boxes are red, due to negative animation-delay being treated as 0s.
I tested in Safari 7, 8 and WebKit nightly. It doesn’t work in any of them.
Negative animation-delay is super useful, both for static interpolation, like what the testcase demonstrates, as well as statically stepping through an animation for debugging reasons. All other UAs support this, except WebKit.
Still not fixed in Safari Developer Preview 9.1.1
We certainly handle negative animation-delay in some cases. I'm not sure why it doesn't work here.
Is this bug primarily about starting in the paused state?
It's used to start halfway through an animation, often used in conjunction with animation-play-state: paused, but not only.
Created attachment 276458 [details]
Attachment shows that this works in the general case, but not when starting paused.
Ideally, even if an animation is paused, a negative `animation-delay` value should allow the animation to appear paused, part-way through.
For example, a paused animation with `animation-delay: -0.5s` should appear paused at 0.5s from the start.
Right. I found a bug in animations with negative delay that are paused from the start, which I think is this bug.
Created attachment 277132 [details]
Comment on attachment 277132 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=277132&action=review
> + /* For manuel testing. */
manuel => manual
> + <div class="container">
You may want to consider adding some text to explain that you can hover over these boxes to animate them when this test is run outside of a test tool (i.e. !window.testRunner) to make this feature more discoverable.
This is broken in Safari 11.0.1 now. And also in Safari Developer Preview.
Can you provide a URL or test case that shows the broken behavior?
Yes, sure. This url http://result.dabblet.com/gist/dda915b008971eb6808b shows rectangles. Sometimes when I reload page they all are red, and sometimes everything is ok, animation working. When I reset animation in dev tools it starts working.
Video of this strange behavior is here https://yadi.sk/i/riuWHvt63PhajH.
I can reproduce. I wasn't able to determine if this is a regression.
Created attachment 326919 [details]
Still not fixed in Safari 11.1