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 Rotating and Scaling SVG

Posted by ramseydennis
ramseydennis
4,530 Points

The heart icon isn't animating - what is wrong with my code? Thanks -

Hi,

The heart icon isn't animating - can you see what's wrong with my code?

Thanks in advance - 

.heart:hover .heart-icon {
  transform: scale(1.3);
}

.heart-icon {
  transition: transform .2s ease-out;
}

<!-- HEART -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200">
  <g class="heart">
    <circle class="heart-bg" fill="#FF8EB4" cx="200" cy="50" r="90"></circle>
    <path class="heart-icon" fill="#FFFFFF" d="M251.5,45.5c0-17.8-11.1-34.6-28.9-34.6c-9,0-16.6,6.3-22.4,12.7c-5.7-6.3-13-12.7-21.8-12.7 c-17.8,0-29.9,16.8-29.9,34.6c0,24.7,37.2,51.1,52.4,51.1C217.5,96.6,251.5,67.7,251.5,45.5z"></path>
 </g> 
</svg>

3 Answers

Nathan Ward
Nathan Ward
7,907 Points
Nathan Ward
Nathan Ward
7,907 Points

Hi this could be due to the browser you are using the following CSS should work cross-browser:

.heart:hover .heart-icon {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.heart-icon {
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
ramseydennis
ramseydennis
4,530 Points

Hi Nathan,

Thanks for your response.

Unfortunately, this code you provided did not work either.

I am curious though, what does the extra code you provided do exactly?

Also - you mentioned this could be a browser issue - the only question I have regarding that, is why is the browser animating the gear and the hammer, but not the heart? If it was a browser issue, wouldn't it not animate any of these?

Thanks again -

jonathanmortimer
jonathanmortimer
27,015 Points
jonathanmortimer
jonathanmortimer
27,015 Points

Check default source code again as the heart icon had the 'gear' class applied to it. So, .gear:hover .heart-icon {...} works

Mark Mangunda
Mark Mangunda
16,652 Points
Mark Mangunda
Mark Mangunda
16,652 Points

Hi. Your key codes for the heart animation are:

.heart-icon { transform-origin: center 50px 50px; }

.heart:hover .heart-icon { transform: scale(1.3); }

.heart-icon { transition: transform .2s ease-out; }