Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

Greg Starkins
PLUS
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

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

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,729 Points

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

Did you add -webkit-transition-property?

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

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