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

Posted by Brent Simpson
Brent Simpson
3,197 Points

CSS challenge (stage 11- transitions and transformations) issue

The question is as follows: "Using the prefix for WebKit-based browsers, create a transition for the border-radius property of .box. Give the transition a duration of 2 seconds, a delay of 1 second, and a timing function that maintains a linear motion."

The code I have attempted to use is as follows: ```.box { border-radius: 15px; background: #4682B4; }

.box:hover { background: #F08080; border-radius: 50%; transition-property: background, border-radius; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear; }```

Something that is obviously not right but I don't know why, is under 'transition-property' the border-radius is showing up in blue (as though it is not being selected). When I preview this there is no delay. So obviously the transition properties are not being taken into account but I have no clue why they aren't!

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brent,

You're somewhat close.

The transition properties should be added to the .box rule, not the hover rule. The transition properties all need the -webkit prefix. Also, they only want you to apply the transition to the border-radius, not to the background. -webkit-transition-property: border-radius;

You can also use the shorthand property for this too:

-webkit-transition: border-radius 2s linear 1s;
Simon Brown
Simon Brown
3,877 Points
Simon Brown
Simon Brown
3,877 Points

might sound silly but check your spelling. i made that mistake so many time but from what i can see (im no expert) looks ok

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points 
.box { 
-webkit-border-radius: 15px; 
background: #4682B4; 
-webkit-transition-duration: 2s; 
-webkit-transition-delay: 1s; 
-webkit-transition-timing-function: linear; }

.box:hover { background: #F08080; -webkit-border-radius: 50%; }

Might work.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi James,

This is pretty close.

The border-radius doesn't need a prefix.

Also, you left off which property should have the transition. -webkit-transition-property: border-radius;

If you leave this off it will default to all properties. So in this case both the border-radius and the background will transition since they both have different values in the hover state.

Brent Simpson
Brent Simpson
3,197 Points
Brent Simpson
Brent Simpson
3,197 Points

Thanks SO much for the help everyone!