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: Part 2

Posted by Kyle Nieber
Kyle Nieber
5,513 Points

Why are the transition properties in the box class selectors and not in the wrap:hover pseudo class selectors?

Basically, why wouldn't the transitions be within the wrap:hover pseudo class since the transitions don't begin until you hover over the wrap div. Here's what I thought it would look like: 

.box {
    width: 25%;
    height: 200px;
    border-radius: 8px;
    background: #4682B4;

 }

.wrap:hover .box {
    background: #F08080;
    margin-left: 75%;
    transition-property: margin, background;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.5, -.5, .3, 1.3);/*linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end */
    transition-delay: 1s;
 }

That obviously doesn't work and this is what the video is saying it is:

.box {
    width: 25%;
    height: 200px;
    border-radius: 8px;
    background: #4682B4;
    transition-property: margin, background;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.5, -.5, .3, 1.3);/*linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end */
    transition-delay: 1s;
 }

.wrap:hover .box {
    background: #F08080;
    margin-left: 75%;
 }

I understand that what I put at the top doesn't work, but I don't understand why it doesn't work. Especially since in Transitions: Part 1, the transition properties are put within the hover pseudo class selector.

Any help would be appreciated to help me understand this better, thanks so much!

2 Answers

Jake Rorrer
Jake Rorrer
17,788 Points

The way transition works is whenever the properties you specify in transition-property change... In this case, whenever margin or background changes, the transition will then occur.

So whenever you change the margin and background of the box in the .wrap:hover .box { } selector, the transition then occurs.

The reason it doesn't work in the first example is transition basically waits until those properties in transition-property change and then takes effect. So since background and margin are specified above all the transition properties, it will not take effect. The "cascading" nature of css also comes into play here.

I hope that helps!

Kyle Nieber
Kyle Nieber
5,513 Points

Ahhhh, that makes perfect sense! Thank you!

Jake Rorrer
Jake Rorrer
17,788 Points

Awesome, glad I could help!

Kat Ingalls
Kat Ingalls
1,593 Points
Kat Ingalls
Kat Ingalls
1,593 Points

Kyle, thanks for asking this- I was just confused by the same issue. Jake, thanks for explaining! Let me make sure I have this right: basically, if everything's already defined BEFORE the transition rule...there's nothing TO transition?

Jake Rorrer
Jake Rorrer
17,788 Points

Hey Kat Ingalls! That is correct... in this case, if background and margin are set before the transition nothing will happen, even though the transition-property is set to look for changes to background and margin. That is because transition waits until whatever is in that transition-property field changes, and then takes effect.