Bug when visualizing negative animation-delay value in the Chrome Dev Tools?

programming web dev
1

Is it me, or is there a bug in the Chrome Dev Tools when visualizing animations with a negative animation-delay property? The full animation is here: https://www.kirupa.com/animations/examples/pulsing_circle.html

Here is the relevant bit:

<div class="circle" style="animation-delay: -1s"></div>
<div class="circle" style="animation-delay: 0s"></div>
<div class="circle" style="animation-delay: 1s"></div>
<div class="circle" style="animation-delay: 2s"></div>

The first circle has a starting point set to start at the point after 1 second of our animation has already run. The visualization in the Dev Tools seems to indicate that this animation (the fourth entry) starts at the same time as the circle with no delay:

image
image.png968Ă—590 37.9 KB

I would expect the timeline to have our fourth circle (at Time 0) to be starting at the 1 second mark in its run (the curve would start somewhere at 75% of its final value) and continue the staggering behavior as exhibited by the other three circles.

Does that seem right? Or am I reading something incorrectly? I tested on both a Canary build (Version 68.0.3427.0) as well as the released version (Version 66.0.3359.139).

Edit: If I change the values as follows:

<div class="circle" style="animation-delay: -3s"></div>
<div class="circle" style="animation-delay: -2s"></div>
<div class="circle" style="animation-delay: -1s"></div>
<div class="circle" style="animation-delay: 0s"></div>

All of the animations show up as starting at the same time:

image
image.png936Ă—682 36.8 KB

Cheers,
Kirupa :rocket:

2

MDN web docs say “A negative value causes the animation to begin immediately, but partway through its cycle”. I believe what they are saying is that a negative value on the animation-delay will always start at 0.

3

I believe the bug is that the animation will play at the 0 mark, but its progress at the 0 mark should be offset by the amount of the delay. Right now, all of the animations start at 0, and they run the full duration from there as opposed to being 1, 2, or 3 seconds long instead. That doesn’t match the behavior of the animation we actually see, so the Dev Tools are making a mistake.

4

I took a look again, I believe you are correct - a bug.

1 Like
5

I filed a bug on them via Chrome’s Send Feedback link :slight_smile:

1 Like