Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

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

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

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.

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

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