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 Transitions and Transforms Transitions and Transforms

Jamie Guerrero
Jamie Guerrero
2,771 Points
Posted by Jamie Guerrero
Jamie Guerrero
2,771 Points

I can see the effect of the fill transition working here in the preview, however rechecking my work won't let me pass.

I can see the transition easing in and out in the preview. I have tried refreshing the page and pasting my code back in. I am using Google Chrome Version 48.0.2564.103 m

It's not a huge deal since I think I have the concept down by now - just thought I'd let you know there may be a bug!

Or maybe I'm doing something wrong?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Animating SVG with CSS</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="60 60 240 240">
    <g>
        <circle class="star-bg" fill="#40adcf" stroke="#fff" stroke-width="6" cx="180" cy="180" r="108.3"/>
          <path class="star" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
    </g>
  </svg>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */
.star-bg {
  transition: .1s ease-out;
}

.star-bg:hover {
  fill: blue;
}

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You've definitely made a perfectly good working transition, but it doesn't look like what the challenge asked for. In particular:

  • the challenge asks that the transition be limited to the fill property only
  • the challenge specifies a duration of 1s (not .1s)
  • the challenge asks for the color steelblue (not blue)
Jamie Guerrero
Jamie Guerrero
2,771 Points
Jamie Guerrero
Jamie Guerrero
2,771 Points

Sorry about the question... shortly after filling out the form I was able to correctly use

transition: fill 1s ease-out;

and it let me complete the rest of the challenge.