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

Eric Washington
seal-mask
.a{fill-rule:evenodd;}techdegree
Eric Washington
iOS Development with Swift Techdegree Student 21,884 Points

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%;
}
Sylvester Rolack II
Sylvester Rolack II
10,092 Points

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.

James Barnett
James Barnett
39,199 Points

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

Leo Haskin
Leo Haskin
3,377 Points

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

Leo Haskin
Leo Haskin
3,377 Points

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

Elisabeth Meyer
Elisabeth Meyer
6,231 Points

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

Akwa Dike
Akwa Dike
4,286 Points

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;
 }
Akwa Dike
Akwa Dike
4,286 Points

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

Brittany Brassell
Brittany Brassell
11,851 Points

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;

Jon Gjerset
Jon Gjerset
3,816 Points

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.

Seth Phillips
Seth Phillips
4,859 Points

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)

CJ Williams
CJ Williams
34,361 Points

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