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

Jason Brown
Jason Brown
9,626 Points
Posted by Jason Brown
Jason Brown
9,626 Points

I don't understand task 2. Seems to be different from lesson examples?

The question seems to group the transition of 1s and the fill property together? Such as ... .star-bg { fill: transition 1s; or fill: 1s; }

In previous lessons Guil applied the 1s transition to the .gear-bg and then applied the fill property in a separate rule on .gear-bg:hover. Like this:

.star-bg { transition: 1s; }

.star-bg:hover { fill: #fff; } I feel like I'm misinterpreting the question? I've tried loads of combos and keep coming up with nothing. Please help!

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;
  fill: #fff;
}
Steven Snary
Steven Snary
17,540 Points
Steven Snary
Steven Snary
17,540 Points

See my suggestions for the correct code listed below to complete task 2 in the challenge.....

In response to your example from an earlier video from Guil:

.star-bg { transition: 1s; } <-- applies to the .star-bg class on page load

.star-bg:hover { fill: #fff; } <-- applies to the .star-bg class on hover only, so the fill color #fff will only apply on hover

2 Answers

Steven Snary
Steven Snary
17,540 Points
Steven Snary
Steven Snary
17,540 Points

For CSS3 learning/training I've mostly used Treehouse - I've also learned a lot from the DevTips YouTube channel for frontend design. It's not a great resource for structured learning - more of a pick a specific element -> I've like the "How to Make a Slide Out Navigation with HTML/CSS (No JavaScript)" and "New Episode on PhPacademy (Styling Awesome Forms)

I like this YouTube channel because they are easy to watch, not too long "shows" and then the code is available to go over and reuse.

Hope this helps, and thanks for the links above, I'll have to check them out. If you have time please also mark my answer (I'm not sure how that shows to you as the poster, but I think you can mark it as the "best answer" or something Thanks!)

Steven Snary
Steven Snary
17,540 Points
Steven Snary
Steven Snary
17,540 Points

Try this....

/* Complete the challenge by writing CSS below */
.star-bg {
  transition: fill 1s;
}
Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

Thanks Steven. Much appreciated. Got it! I went back through my notes and re-watched the video as well. One more question for you. As far as general practice and education goes ... Someone, on a different thread, posted the Flexbox Froggy challenge http://flexboxfroggy.com/ and I've since found the CSS Diner challenge https://flukeout.github.io/. I've found these to be REALLY useful in reinforcing content learned through Treehouse. I've tried to find some for practicing transitions and transformations, but have come up empty. Do you know of any? Or do you know of sites where I might find more stuff like this as I move forward? Thanks again!