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


Transitions and Transforms badge code challenge

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 main

here's my code in the css file :

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

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

Everything is supposed to work well but the editor is saying that i made mistake.

I don't know why but seems to me that my code is correct. Anybody can help me !!

Great work! Tip: Remember to use the -webkit- prefix.

i don't know where to put the -webkit- prefix.

I've seen the video 2 times and he's not using the -webkit- prefix so i really don't know where to put this one.

If i'm not using these prefix, it works fine. That's why i just can't figure it out why that gives me an error when i'm trying to validate the code !!

1 Answer

ok, i've found the solution : i've made this line :

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

the validator accepted this answer but my browser (mozilla firefox version 22.0) didn't worked well with my solution.

I think the next time i'll try my code, i'll use Google Chrome. Seriously, Firefox is losing his prestige since about 1 - 2 years. He's bugging regularly with some flash videos and now, he's rushing when i'm coding some css.

Firefox = horrible browser (polite way to say what i think about them !!)

-webkit- only works with chrome, safari and new opera. Firefox currently works with the un-prefixed version of the transition property, which is why it worked for you originally.

The code challenge is set up to only count the -webkit- version as correct I believe.

That's correct the code challenge is set up to only count the -webkit- version. i'm glad it worked for you!