Question about the delay property used in animation

Question

I have a question about the delay property. If we consider the following example:

.star circle { animation: pulse .7s 1.5s; }

.star circle:nth-of-type(2) { animation-delay: 1.6s; }

.star circle:nth-of-type(3) { animation-delay: 1.7s; }

What will be the actual delay here?

.star circle has already a delay of 1.5s, but then we target individual circles as well with nth-of-type, what will the delay be for i.e .star circle:nth-of-type(2)? Will it be 1.5s+1.6s = 3.1s? Or will the delay only be 1.6s?

Thanks in advance

Answer 1 · 2016-03-01T15:13:06Z

March 1, 2016 3:13pm

Hey Jacob, the delays for the animations only apply to the assigned element, what they do is they all start the delays at the same time, and run at their respective delay time. So an element with 1.6s delay and an element with a 1.8s delay will start their "stopwatches" at the same time then run after their assigned delay is up. Hope this helps!

Answer 2 · 2017-07-26T02:45:29Z

July 26, 2017 2:45am

What happens is that all the circle elements within .star first get an animation-delay of 1.5s. Then, each circle element gets their own individual animation-delay because we explicitly overwritten them individually. The first circle is the only one to retain the initial animation-delay of 1.5s because we did not overwrite its value.

So to answer the question, the delay for .star circle:nth-of-type(2) will be 1.6 because we overwritten the initial value.

Welcome to the Treehouse Community

Looking to learn something new?

Jacob Brech

Jacob Brech

Question about the delay property used in animation

2 Answers

Kane Simmons

Kane Simmons

Michael Braga

Michael Braga