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

Posted by Harish Ramachandran
Harish Ramachandran
9,171 Points

Stuck on transitions code challenge

Hi guys,

I'm working on the Code Challenge for Transitions - Webkit only, but can't seem to get it to work no many how many variations I've tried. I've even looked at other forum posts on the topic and don't understand what I could be doing wrong. The error says to make sure my transition property is correct, but I don't see what's wrong with it. Can you take a look at it? The page link is below, and the codes I think should work (but don't) are below that. Thanks!!!

http://teamtreehouse.com/library/websites/css-foundations-second-edition/transitions-and-transforms/transitions-webkit-only

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


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

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

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I think you may be confusing the challenge engine as you have too much code.

Why are you adding rules for .box and .box:hover again underneath? It looks like you have answered the question correctly with the first half of your code.

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

/* do you need anything under this line? (hint: no) */

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

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

You could use either the top or bottom half of the code, both should go through correctly.

James Barnett
James Barnett
39,199 Points

> do you need anything under this line? (hint: no)

Tom Bedford I like your style :cookie:

Harish Ramachandran
Harish Ramachandran
9,171 Points
Harish Ramachandran
Harish Ramachandran
9,171 Points

Thanks, Tom! It worked