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

Greg Starkins
PLUS
Greg Starkins
Courses Plus Student 4,905 Points
Posted by Greg Starkins
Greg Starkins
Courses Plus Student 4,905 Points

Am I missing something?

I am on stage 11 of Transitions and Transforms on CSS Foundations and I'm stuck on the challenge.

The challenge says:

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.

Any ideas?

Below is the code I have entered:

/* Complete the challenge by writing CSS below */

.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%;
}

6 Answers

chriscameron
chriscameron
15,397 Points

Yeah I have just done this challenge and Greg you're right on about this. I put in the correct code, previewed and it didn't work. So i changed it to miss out the -webkit-transition-property: border-radius; and the preview worked but it was not accepted as the actual code. Thanks for the help though! :)

Greg Starkins
PLUS
Greg Starkins
Courses Plus Student 4,905 Points
Greg Starkins
Greg Starkins
Courses Plus Student 4,905 Points

Thanks Andrew.

I added transition-property: border-radius; and in the preview it screwed up the transition and it was working fine before. I submitted the code and passed the challenge though. Maybe a bug?

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

you need your Transition property to tell it that the transition is for the border-radius

Dave Evans
Dave Evans
13,160 Points
Dave Evans
Dave Evans
13,160 Points

Did you add -webkit-transition-property?

Dave Evans
Dave Evans
13,160 Points

I just redid the challenge and didn't have an issue. There are four properties you need to include and all four need to have the -webkit- in front of them. Make sure you have your 'transition-property', 'transition-duration', 'transition-delay' and 'transition-timing-function' with the values required by the challenge. All must have the -webkit- before and you will be able to finish it successfully.

Greg Starkins
PLUS
Greg Starkins
Courses Plus Student 4,905 Points
Greg Starkins
Greg Starkins
Courses Plus Student 4,905 Points

I already completed it Dave. Don't know why the transition didn't show in the preview, but the code was accepted anyway