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

CSS Foundations (Transitions and Transforms Transitions) - WebKit Only - Code Challenge

Having problems figuring out this code challenge. Can someone help me please?

Question:

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.

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

THanks for the help in advance.

13 Answers

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

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

thanks for the code

I have to agree with Michael K. on this one. This particular lesson did not flow like the others. More code examples can be given in the video to help troubleshoot, problem-solve, or the self-discovery process. This is one the few times the answer was nebulas. That's what generating "I've been stuck here too long, from the students/users..." comments.

I think it should be considered that "hinting" does not help the student compared to repetition. "Hinting" when all of the student's mental or educational resources have been exhausted (granted it could be all in the student's head) is frustrating and will lead to quitting or a "I give up moment".

I have plenty "Aha!" moments since joining, this time it felt like war versus the pleasurable moments I have felt. I used W3C Schools to find others examples, of the "-webkit-transition-property: ;" ... That is when the "Aha!" moment occurred, and the information became permanently ingrained into my long-term (and working) memory at that time.

Tagging Guil Hernandez so he sees the feedback about this lesson.

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

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

I was going nuts until I saw this, I totally wasn't looking at the webkit prefix. Thanks!

How do you declare the property to the box?

this question took me way too long lol i know they we should use the shorthand version but if individually we doing it right it should be able to work...

My code is not working.

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

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


Figured it out.

Your assigning the transition-property: a class and not a property

Hey, here is my code. it looks right to me but i must be going wrong somewhere. please help me, i've been stuck for ages.

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

nevermind i just solved it with erics one, i had too mat webkit transitions

I'm sure I'm making the same mistake as the other people here, but any guidance is much appreciated. I've tried switching out the transition property for the class the directions want affected, but that just seems redundant since it's within the class for hover anyways. Help, I've been stuck here for too long and I am getting the right effect but it won't let me pass.

-Webkit-transition-property: border-radius; -Webkit-transition-duration: 2s; -Webkit-transition-delay: 1s; -Webkit-transition-timing-function: linear;

The only way I could get it to work was to use the shorthand version of the transition property. Same values for all would not work when individually referenced.

would be helpful if the cubic bezier curve for linear would be accepted the same as just typing linear. wasted a ton of time trying to figure out why my code was "incorrect", when it just wanted linear instead of cubic-bezier(0, 0, 1, 1)

I think that some of you may be over complicating this one. All we need to do is

-webkit-transition: transition-property transition-duration transition-timing-function transition-delay*;*

Therefore, the solution to this question will be:

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

Hopefully this helps some of you.

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