Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Animating SVG with CSS Transitions and Transforms Transitions and Transforms

help me in this challenge ...

i added the following lines for the solution of challenge, but I can't find where I am doing wrong

my code is

.star-bg {
 transition: fill 1s ;
}
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 : fill 1s ;
}

2 Answers

nico dev
nico dev
20,364 Points

I am assuming you are in step 2. Could you confirm that?

If so, you're doing right, except you must leave no space between the property and the colon. That is, transition: should not be typed transition :.

If that's not the step you're in, or you still have the problem, please let us know.

why is "transition :" not working, is it a rule in css that we cannot apply blank space after any attribute ? just curious

nico dev
nico dev
20,364 Points

Good question.

As far as I know, it's exactly the same to the browser, and I think there's nothing about bad practice or something like that.

However, do take into account not every whitespace is the same for the browser in a CSS declaration rule. There are some that make a lot of difference. Here are some examples.

Having said that, I've seen different things with regards to the space after the colon, but I've almost never seen whitespace before the colon. So most probably if you will work in a team, everyone will tend to use no space between property and colon. (anyway, you'll probably minify for production and they'll no longer be there; it's more of a readability and maintenance thing).

HTH!

David Brener
David Brener
3,794 Points

Vivek,

You need to group the SVGs using the <g> tag. See code below:

<!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>