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 trialpaul oram
3,429 PointsPulse 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
Front End Web Development Techdegree Student 1,106 Pointsto set transform-origin on center you need to do it like this now:
.badge *{ transform-origin: center; transform-box : fill-box; }
paul oram
3,429 PointsMy post refers to making this work on Firefox. It gives exactly the same result as the video.
Steven Parker
231,269 PointsDoes the 50%/50% setting not work on Firefox?
Patricia Jackson
Front End Web Development Techdegree Student 9,165 PointsThe 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
231,269 PointsI 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.
Steven Parker
231,269 PointsWhy the downvote? Please post a message explaining it!
Soleil Walker
UX Design Techdegree Graduate 18,955 PointsSteven Parker I wasn't the down-voter, but I'm assuming that the downvote was because neither the pixel value nor the percentage value works for some of us. I was having the same issue. Austin Powers 's solution worked for me though -->
.badge * {
transform-origin: center;
transform-box : fill-box;
}
Ching Yue Chen
5,507 PointsChing Yue Chen
5,507 PointsThanks! It works!
Katie Carlton
5,382 PointsKatie Carlton
5,382 PointsThis 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
Front End Web Development Techdegree Graduate 15,024 PointsZachary Danz
Front End Web Development Techdegree Graduate 15,024 PointsThis 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.
Ryan Markey
Front End Web Development Techdegree Student 12,565 PointsRyan Markey
Front End Web Development Techdegree Student 12,565 PointsThis works. Good find.
Jordan Burch
Front End Web Development Techdegree Graduate 14,981 PointsJordan Burch
Front End Web Development Techdegree Graduate 14,981 PointsThis needs to be added to the course!
Soleil Walker
UX Design Techdegree Graduate 18,955 PointsSoleil Walker
UX Design Techdegree Graduate 18,955 PointsThis fixes it for me too! Was having the same prob on both Safari & Chrome.