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
Jason Larkin
13,970 PointsStuck 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
21,956 PointsIt appears that you have left off the opening curly bracket right after .box.
Jason Larkin
13,970 PointsThank you but even with the opening curly bracket it does not work.
Adam Moore
21,956 PointsDo you have .box doing something to transition to? Like, when it is hovered, to have something change?
Jason Larkin
13,970 PointsYes there is the following CSS beneath it.
.box:hover { background: #F08080; border-radius: 50%; }
Jason Larkin
13,970 PointsYes there is the following CSS beneath it.
.box:hover { background: #F08080; border-radius: 50%; }
Jason Larkin
13,970 PointsYes there is the following CSS beneath it.
.box:hover { background: #F08080; border-radius: 50%; }
Adam Moore
21,956 PointsYour 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
13,970 PointsThank 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
21,956 PointsAre 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
13,970 PointsI followed the instructions to the letter and it's still giving me an error message, so I don't know what to do.