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

Kaushik Sanyal
Kaushik Sanyal
6,378 Points

Can someone take a look at my code, I am having issues where my Star and 5 points are not rotating from the center

CSS

/* -------------------------- Base --------------------------- */

body { background: #8069a1; padding-top: 60px; }

svg { margin: auto; display: block; }

/* -------------------------- Keyframes --------------------------- */

@keyframes grow { 0% { transform: scale(0); } 30% { transform: scale(1.1); } 60% { transform: scale(0.9); } }

@keyframes turn { 0% { transform: rotate(0) scale(0); opacity: 0; } 60% { transform: rotate(375deg) scale(1.1);

} 80% { transform: rotate(355deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); }

}

@keyframes pulse { 50% { transform: scale(1.4); } }

/* -------------------------- SVG Styles --------------------------- */

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

.outer, .inner, .inline { animation: grow 1s ease-out backwards; }

.inner { animation-delay: .1s; }

.inline { animation-delay: .15s; }

.star { animation: turn 1.1s .2s ease-out backwards; }

.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

Dusan Zivanovic
Dusan Zivanovic
1,274 Points

Try 40% 40% in tranform origin. Worked for me. .badge * { transform-origin:40% 40%; }

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