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

Posted by Arturo Gutierrez
Arturo Gutierrez
11,414 Points

It tells me to target the fill property with the transition property but it says I haven't done that.

Is there something else I'm suppose to do to the code because I'm really stumped.

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;
}

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

2 Answers

jacobproffer
jacobproffer
24,604 Points

You're close. Remember that you're setting this transition for the fill property. 

.star-bg {
  transition: fill 1s; 
}
Arturo Gutierrez
Arturo Gutierrez
11,414 Points

Thank you so much. That was driving me crazy. Now I will remember that in my future projects.

Matthew Delange
Matthew Delange
26,584 Points
Matthew Delange
Matthew Delange
26,584 Points

Try This Arturo Gutierrez....

<!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="#red" 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>

Happy coding :)