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

Corey Lyons
Corey Lyons
24,684 Points
Posted by Corey Lyons
Corey Lyons
24,684 Points

Need help with this challenge!

Trying to figure out this code challenge for transitions and its not letting me pass. It is saying make sure your transition property is correct.

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

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

Any ideas what is wrong with this code?

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Corey,

The only problem I see is that you didn't specify which property the transition should be applied to. By default the transition applies to all animatable properties. In this case, since both the background color and the radius have different values on hover, they would both transition. Try it out in the preview if you're doing this in chrome. If you're on firefox then you can remove the vendor prefixes for the preview but be sure to put them back to pass the challenge.

I've added in the transition-property property to specify which property should get the transition.

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

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

You can also use the shorthand transition property to keep it all on one line.

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

The order is property, duration, timing function, delay.

Corey Lyons
Corey Lyons
24,684 Points
Corey Lyons
Corey Lyons
24,684 Points

Thanks for all the help!