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 Jason Larkin
Jason Larkin
13,970 Points

Stuck on this transitions exercise

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

I am using the above code to try to give the transition a duration of 2 seconds, a delay of 1 second and a timing function that maintains a linear motion in a webkit format. What am I doing wrong? Thank you in advance for any replies.

10 Answers

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

It appears that you have left off the opening curly bracket right after .box.

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you but even with the opening curly bracket it does not work.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Do you have .box doing something to transition to? Like, when it is hovered, to have something change?

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Yes there is the following CSS beneath it.

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

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Yes there is the following CSS beneath it.

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

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Yes there is the following CSS beneath it.

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

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Your code works for me using Chrome. Are you using a different browser, like Firefox or IE? From what I've heard, some browsers have trouble with certain newer aspects of CSS, and some require different browser prefixes, like "-moz-". The only other thing that I can think of personally is something else in your CSS/HTML might be throwing it off, such as not linking the CSS file properly to the main HTML file.

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you Adam, I'm using Chrome currently and it works in the preview. I thank you for your attention and getting back to me, but I think I'm just going to have to try different browsers and failing that, get in touch with support. Cheers.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Are you sure you are giving the .box enough time to show? if you hover over and move the mouse out before 1s, as your delay suggest, then it won't work. Just a thought...

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

I followed the instructions to the letter and it's still giving me an error message, so I don't know what to do.