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 Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

Yuki Katada
Yuki Katada
24,015 Points
Posted by Yuki Katada
Yuki Katada
24,015 Points

Why in .box?

I don't understand why -webkit-transition property should be in .box selector but not in .box:hover It actually doesn't work when I put it in .box but works fine in .box:hover.

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

If you want to transition from style A to style B then back to style A, you must put the transition property into style A. So if you want to see a transition effect when you mouse over then off an element, you put the transition property in the style that formats the element BEFORE you hover over it not the :hover style.

You can see how the transition acts differently depending on where you place the transition property in this pen: http://codepen.io/sawmac/pen/ADamo

Mouse over the first red button and you'll see it fade out on hover, and fade in when you mouse off it. Both transitions are smooth.

But in the second button, the transition property is applied to the :hover style. If fades out OK, but when you mouse off, it abruptly changes back (no transition).