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
Micah Dunson
34,368 PointsI don't know what I'm doing wrong. I cant seem to figure out the correct "transition-timing-function: linear;"
from my other transition properties everything works as should then I add the timing function and it gives me the edit "Make sure your property is correct. When adding the duration and delay I don't have a problem. only on the last item. I don't see my error. Please help
Micah Dunson
34,368 PointsI've tried this and it works but not according to the quiz. So not sure what I'm missing. the quiz asks :
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 maintains a linear motion.
.box {
border-radius: 15px;
background: #4682B4;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: linear
}
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Micah,
You're missing which property should have the transition.
-webkit-transition-property: border-radius;
If you don't specify which property then the default is all. This means both the border-radius and the background-color would transition.
As far as it not working in the preview when you use the prefix could be because you're not using chrome or safari. If you're using firefox for example, and you would like it to pass the challenge but also be able to see it in the preview then you can specify both the -webkit prefix and the non-prefixed version.
Micah Dunson
34,368 PointsThank You! I was going crazy. I had put that in the beginning however omitted the -webkit prefix so it was wrong and I thought it was partially due to having that in the rule. Thanks a mill...you da man.
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Ken Alger
Treehouse TeacherMicah;
You need to add the WebKit prefixes to your code: -webkit. So, your properties would need to be:
-webkit-transition-duration:
-webkit-transition-delay:
-webkit-transition-timing-function:
With the requested challenge values associated with each property. There is also a single line of CSS code that will do all of these as well.
transition: <property> <duration> <timing-function> <delay>; Again, for WebKit browsers you must include the -webkit- prefix.
You can check which browsers can use which css/html/svg/javascript properties at caniuse.com.
Best of luck,
Ken
Micah Dunson
34,368 PointsEven with the prefix it still comes back incorrect. I though about using shorthand but opted to keep it basic as and do just as instructed. I gotta be missing something basic but just can't seem to figure out what. I've even tried the code on a workspace and everything works as it should. To top it off in the quiz when I add the -webkit prefix the transition will not function properly like it does without the prefix lol.
.box { border-radius: 15px; background: #4682B4; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; }
Cristian Gusa
16,100 PointsUsing 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 maintains a linear motion.
Bummer! Make sure your transition property is correct.
i have the same problem, what can i do? :)
Jason Anello
Courses Plus Student 94,610 PointsHi Cristian,
Have you compared your code to what you see in this discussion?
what code do you have?
Logan R
22,989 PointsLogan R
22,989 PointsCan you please share your code?
Try adding proper code mark-up by putting three ` before and after your code.