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

paul oram
paul oram
3,429 Points
Posted by paul oram
paul oram
3,429 Points

Pulse animation of 5 circles

Hi all, this is more a tip than a question: Because of the universal selector added to the badge class for the transform origin

.badge * { transform-origin: 180px 180px; }

the @keyframes pulse animation doesn't work as expected.

I got around this by adding classes to all the separate circles within the star group and then setting each with its corresponding exact px transform origin. Then it works fine ie

.circle-1 { transform-origin: 180px 107.8px; } .circle-2 { transform-origin: 223.7px 244.2px; }

etc...

4 Answers

Austin Powers
.a{fill-rule:evenodd;}techdegree
Austin Powers
Front End Web Development Techdegree Student 1,105 Points

to set transform-origin on center you need to do it like this now:

.badge *{ transform-origin: center; transform-box : fill-box; }

Ching Yue Chen
Ching Yue Chen
5,507 Points

Thanks! It works!

Katie Carlton
Katie Carlton
5,382 Points
Katie Carlton
Katie Carlton
5,382 Points

This was the only way I was able to get the 5 points to pulse from the tip of the star rather than shoot straight out and back from each tip of the star. Thanks!

Zachary Danz
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Zachary Danz
Front End Web Development Techdegree Graduate 15,024 Points
Zachary Danz
.a{fill-rule:evenodd;}techdegree seal-36
Zachary Danz
Front End Web Development Techdegree Graduate 15,024 Points

This worked really well for me! Is it just a Chrome thing? I was also experiencing the issue where the circles shot off in a direction rather than pulsed as intended.

Jordan Burch
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Burch
Front End Web Development Techdegree Graduate 14,981 Points

This needs to be added to the course!

paul oram
paul oram
3,429 Points
paul oram
paul oram
3,429 Points

My post refers to making this work on Firefox. It gives exactly the same result as the video.

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

Does the 50%/50% setting not work on Firefox?

Patricia Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Patricia Jackson
Front End Web Development Techdegree Student 9,165 Points
Patricia Jackson
.a{fill-rule:evenodd;}techdegree
Patricia Jackson
Front End Web Development Techdegree Student 9,165 Points

The 50% 50% setting doesn't seem to work in the Chrome browser. When I tried the 180px it showed the circles shot away from the tip of the star. What Austin Powers has up works just fine.

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

I can see how that setting would give you a different (though interesting) result from the video.

But that's not the course setting. The course setting, which can be seen at about 15 seconds into the video, is:

.badge * {
  transform-origin: 50% 50%;
}

This setting will produce the effect as seen in the video without individual settings for each circle. It was created at about 8:35 in the previous video.