CSS Animating SVG with CSS Transitions and Transforms Transitions and Transforms

Melissa Schenter
Melissa Schenter
1,895 Points

.star-bg:hover { fill:white; transition:1s;} (this accomplishes the challenge! why won't it accept my answer? Thanks!)

This challenge is asking me to "create a 1s transition for the .star-bg fill property. My answer below accomplishes this! Do you know why it's not accepting my answer? Thanks.

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

2 Answers

Rabin Gharti Magar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rabin Gharti Magar
Front End Web Development Techdegree Graduate 18,799 Points

Hey Melissa Schenter,

I looked at the code challenge question and the code you have written does not match with what you have been asked to do. I will break this down into small sections so you can understand it better.

  1. Before creating a hover state, you should only be targetting .star-bg and add a 1s transition property.

    .star-bg {
    transition: fill 1s;
    }
    
  2. You then create a hover state on .star-bg and change the fill color to steelblue. You used a white fill color which is incorrect.

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

Hope this helps!

Melissa Schenter
Melissa Schenter
1,895 Points

Hi Rabin,

Thanks for the help! I did not realize that I could include the property "fill" after "transition:". I had only seen "fill" as "fill:" with a list of it's own properties after. I did not see this used this way in one of the videos. Did I miss it?

I had not gotten to the second part asking for a "steelblue" color. I just picked a random color because I didn't know how else to use "fill" besides "fill: [insert color]."

Thanks again for the clarification.

Best, M