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 Phillip Gutowski
Phillip Gutowski
3,574 Points

Transition works, but test is not passing.

I've tried both the short hand and long hand implementation of the CSS transition properties. I've referenced W3C and MDN and feel like my code should be correct. The transition works in the preview, but the challenge is not passing. Please help.

.box {
    border-radius: 15px;
    background: #4682B4;
 }

.box:hover {
    background: #F08080;
    border-radius: 50%;
    -webkit- transition: border-radius, 2s, linear, 1s;
}

7 Answers

Carman A
Carman A
7,672 Points

There's a space between the webkit prefix and the transition property.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

carman arrington - Good catch, I didn't see that either.

Carman A
Carman A
7,672 Points

Thank you :)

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Move your code below the background: #4682b4 in .box. I just ran it and passed.

Phillip Gutowski
Phillip Gutowski
3,574 Points
Phillip Gutowski
Phillip Gutowski
3,574 Points

Thanks Carman, Unfortunately, it's still not passing for me. Here is my current code... Did you do anything different?

.box {
    border-radius: 15px;
    background: #4682B4;
  -webkit-transition: border-radius, 2s, linear, 1s;

 }

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Take out the commas. I just copied and pasted your code it's the commas.

Phillip Gutowski
Phillip Gutowski
3,574 Points

Thanks for your help, but somehow it's still not passing. This is what I have right now...

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

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
Phillip Gutowski
Phillip Gutowski
3,574 Points
Phillip Gutowski
Phillip Gutowski
3,574 Points

Thanks Carman! Sometimes I just need another set of eyes.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

LOL I know the feeling. Giving people bad advice and getting corrected really helps :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Phillip Gutowski -

> The transition works in the preview

I ran your original code, the transition didn't actually work, what you were saw was a hover state change not a smooth transition.