Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

Thanks! It works!

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

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.

This needs to be added to the course!

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
216,070 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,163 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
216,070 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.