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 Creating an SVG Animation Sequence

Posted by Pierre Grönberg
Pierre Grönberg
10,294 Points

I can't manage to get this to be working ?

Why won't this code work? 

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

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



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

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

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

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

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

2 Answers

Gemz Nunn
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

I tried it with "180px 180px" and it works fine for me.

Delete the spaces between scale and (). I found that to be causing my code some problems when I did this exercise.

Oscar Gomez
Oscar Gomez
6,797 Points
Oscar Gomez
Oscar Gomez
6,797 Points

Thank you Gemz. Had same problem. deleting spaces did the trick!