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

Jason Larkin
Jason Larkin
13,970 Points
Posted by Jason Larkin
Jason Larkin
13,970 Points

Problem with Transitions code challenge

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


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

I posted the above code to create a transition for the border-radius .box. It SHOULD be right and looks right in the preview. Can anyone help? I keep getting an error message and it is becoming maddening. Thank you in advance for any replies.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

HI Jason,

You left off which property should receive the transition.

-webkit-transition-property: border-radius;

If you leave this off then it defaults to all animatable properties. In this case, both the border-radius and the background color would transition but they only want the border-radius to transition and the background would be an instant change.

You can also combine all properties with the shorthand property:

-webkit-transition: border-radius 2s linear 1s;
Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

That was the solution, thank you Jason!

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

You can write the transition statement as a single line: transition: property duration timing-function delay. In this case the property is the border-radius of .box, the other values are the transition values. Your code should look like this: -webkit-transition: border-radius 2s linear 1s;

I don't know exactly why your code isn't working, but sometimes they expect a different solution to the given problem I guess.

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you Erwin! That was the solution. Cheers