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

Posted by Zach Allan
Zach Allan
19,452 Points

Transition not working on Preview

The code challenge said that I had completed the challenge successfully but the transition in preview mode did not work. It only changed my background color and not my border-radius.

2 Answers

Thomas Horner
Thomas Horner
11,185 Points
Thomas Horner
Thomas Horner
11,185 Points 
-webkit-transition-property: border-radius;
-webkit-transition-duration:2s;
-webkit-transition-delay:1s;
-webkit-transition-timing-function:linear;

That's what your code should look like inside the .box class

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Zack,

Were you viewing in a webkit based browser? chrome or safari.

What you should have seen was an instant change for the background and then after a 1 second delay you would see the border-radius transition over 2 seconds.

Is it possible you were impatient like me and kept hovering on and off and not waiting long enough for the 1 second delay?

If you were trying to preview it with firefox then you would need to remove the -webkit prefixes. Or probably you could add non-prefixed versions after the webkit ones.