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 Fill and Stroke Transitions

gene c
gene c
13,630 Points
Posted by gene c
gene c
13,630 Points

My stroke-width animation is extremely abrupt

When i hover over the hammer icon, the stroke-width increases then abruptly decreases. Not sure why. I followed all the steps.

Here's my code:

.hammer-bg {
  stroke: #fee16e;
}

.hammer-bg:hover {
  fill: #feae6e;
  stroke-width: 8px;
}

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

There isn't any transition defined yet for this element. If you wanted a similar effect to what the gear does, you could add this line to your ".hammer-bg" CSS rule:

  transition: .3s ease-out;

It's possible that this was intended to be shown in the video but accidentally left out. In that case, you might want to submit a bug report to the Support staff.

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Make sure you are hovering over the circle background, not the hammer icon itself (which is not tied to the color animation).