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

Jamie Winspear
Jamie Winspear
4,321 Points
Posted by Jamie Winspear
Jamie Winspear
4,321 Points

Transitions

I'm having problems with the transitions challenge task, where you must give the border-radius property a duration of 2s, and a delay of 1s. I've been having problems contacting the treehouse server, so I am wondering if this is a continuation of my problems, as I can;t see where I am going wrong. My code is as follows, placed in the .box:hover class selector.

  -webkit-transition-property: border-radius;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;*/

I have also tried the shorthand,

 -webkit-transition: border-radius 2s linear 1s;

but neither seem to work. Where am I going wrong?

2 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

The transition should be applied to the original state not the hover so the following should work.

.box {
  -webkit-transition: border-radius 2s linear 1s; 
}

Also I edited you question to include the correct markup,if you now click edit you can see how to format it correctly.

Jamie Winspear
Jamie Winspear
4,321 Points
Jamie Winspear
Jamie Winspear
4,321 Points

Thanks. I don't really understand why the transition has to be placed in the .box class original state, rather than the hover. My preview seemed to work regardless. Is it just good practice, or is there a specific reason you should place transitions in the original state.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

I you place it in the original state then the transition will be applied to the :hover. If you place it in the :hover state then I believe it will be applied upon leaving the hover. So the opposite if that makes sense. Plus having it load on the original state when the document loads I it is already there and ready loaded for when a hover takes place. Making it smoother/faster

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Guys,

I was playing with the code challenge and the difference seems to be that when I put the transition in .box the transition happens in and out. When I put the the transition in .box:hover it transitions in but snaps out.

Jeff