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
Jean Philippeaux
4,259 PointsTransitions 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 !!
Jean Philippeaux
4,259 Pointsi 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
Jean Philippeaux
4,259 Pointsok, 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 !!)
J A
6,092 Points-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.
Samuel Lopez
Front End Web Development Techdegree Student 13,960 PointsThat's correct the code challenge is set up to only count the -webkit- version. i'm glad it worked for you!
Samuel Lopez
Front End Web Development Techdegree Student 13,960 PointsSamuel Lopez
Front End Web Development Techdegree Student 13,960 PointsGreat work! Tip: Remember to use the -webkit- prefix.