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

**URL:** <https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207>\
**Category:** web dev\
**Created:** [May 12, 2018, 11:18pm UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207 "2018-05-12T23:18:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 12, 2018, 11:18pm UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207/1 "2018-05-12T23:18:28Z")

</div>

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: [Pulsing Circle](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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/1ea30a9c23f980611019e411b2d9eabefd3c1768.png)

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/690d52ddee0b62c9e4b9eca5f61b706b8adc8dac.png)

Cheers,  
Kirupa 🚀

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 13, 2018, 4:00pm UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207/2 "2018-05-13T16:00:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 13, 2018, 4:55pm UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207/3 "2018-05-13T16:55:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 14, 2018, 1:37am UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207/4 "2018-05-14T01:37:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 15, 2018, 6:50am UTC](https://forum.kirupa.com/t/bug-when-visualizing-negative-animation-delay-value-in-the-chrome-dev-tools/638207/5 "2018-05-15T06:50:37Z")

</div>

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