Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Finishing the Animation Sequence

Keith Corona
Keith Corona
9,553 Points
Posted by Keith Corona
Keith Corona
9,553 Points

Finishing the animation sequence - what if we wanted the star points to delay in a specific order?

In the "Animating SVG with CSS" series, in the video "Finishing the animation sequence", we set delays to the 5-points of a star using nth-of-type. I wanted to know if there is an easy way to use nth-of-type or another command to be able to set the delays in a specific order, perhaps to start at the top point and work all the way around to clockwise.

.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;
}

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

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

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

You already have the stars pulsing in sequence, you just want to change the order. Try moving the last circle to the 2nd position in the HTML, like this:

      <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/>
      <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/>
      <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/>
      <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/>
      <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/>

Now the pulses will occur clockwise, starting at the top. You could also get the same effect by changing the order of the delays in the CSS, but there you would need to make changes on 4 lines instead of just moving one line in the HTML:

.star circle:nth-of-type(5) {
  animation-delay: 1.6s;
}
.star circle:nth-of-type(2) {
  animation-delay: 1.7s;
}
.star circle:nth-of-type(3) {
  animation-delay: 1.8s;
}
.star circle:nth-of-type(4) {
  animation-delay: 1.9s;
}

Just don't change both files!

shaun bolak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points
shaun bolak
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points

I ended up playing around with settings before noticing Steven's answer for this question. These delays work quite nice:

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

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


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

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

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

The first circle is going to begin to pulse at 1.5s. After that, it is just trial and error to figure out which nth-of-type location number fires next. Otherwise, the delay timings are just from preference on what looks best (a .3s delay seems to be most natural for the animation). Play around with the delay timings and find what you think looks best^^