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 Adam Cassano
Adam Cassano
4,702 Points

is there a problem with this challenge? or am i putting in the wrong code?

/* Complete the challenge by writing CSS below */

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

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

}

3 Answers

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

The questions states "...Give the transition a duration of 2 seconds, a delay of 1 second, and a timing function that maintains a linear motion." You're missing the timing function

Adam Cassano
Adam Cassano
4,702 Points

LOL i could of sworn i added that earlier, and it didn't work; but i guess i didn't put in right; thanks! it worked.

Craig MacNeil
Craig MacNeil
5,970 Points
Craig MacNeil
Craig MacNeil
5,970 Points

I'm having trouble with the same CSS Transitions challenge. I can't see what I'm doing wrong though. Please help.

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

.box:hover {
    background: #F08080;
    border-radius: 50%;
}
Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

craig. That's odd. I just copied and pasted your code into the challenge and it worked fine.

Adam Cassano
Adam Cassano
4,702 Points
Adam Cassano
Adam Cassano
4,702 Points

the only thing i did was add: -webkit-transition-timing-function: linear; to the next line; that seemed to work; i thought earlier i was having a issue but i might of been typing it in wrong. hope that helps.