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
Todd Squitieri
8,001 Points-webkit-based transitions
I am so stuck on this particular lesson involving -webkit-based transitions. The question is as follows: "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."
I basically added -webkit- prefixes to "transition-property," "transition-duration," and "transition-delay," all within the box class. Why is this not working for me? I keep getting an error message that asks me to check the transition-property again.
What am I doing wrong?
Any help is much appreciated!
Thanks so much!
Todd
8 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Todd,
Please show the code you're using. It looks like you're missing the timing function.
Todd Squitieri
8,001 PointsHi Jason,
Thanks again for the help. And sorry for not pasting the code! The question is: "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."
And the code that I am using is this:
.box { border-radius: 15px; background: #4682B4; -webkit-transition: background, border-radius; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; }
.box:hover { background: #F08080; border-radius: 50%; }
The error message reads: "Bummer! Make sure your transition property is correct."
What do you think?
I was so confident that this coding would have worked. Not sure where my gap in understanding is, but any enlightenment would be much appreciated (as usual).
Thanks again, Jason!
Jason Anello
Courses Plus Student 94,610 PointsHi Todd,
Sorry for the delay here.
The challenge only wants the border-radius to have the transition. Whereas you have specified both the background and the border-radius
So you would want to use -webkit-transition-property: border-radius; along with the other individual transition properties.
You can also use the shorthand -webkit-transition property to specify all values together.
-webkit-transition: border-radius 2s linear 1s;
Todd Squitieri
8,001 PointsHi Jason,
Sorry for the delay. I put my account on a brief momentary pause for the month.
Thanks for the help! I will go through the tutorial once more and try out what you've said. Will let you know if I get any success!
Thanks again,
Todd
Todd Squitieri
8,001 PointsI passed, finally!
I put the following in the box class
<code> transition-duration: 2s; transition-delay: 1s; -webkit-transition: border-radius 2s linear 1s; </code>
And this seemed to do the trick.
I was and am still having some difficulties determining which code goes into the box class and which code goes into the hover pseudo-class; it's not clear to me which class takes the "transition-coding."
Any information or special hint on how to understand this would be great.
-T
Jason Anello
Courses Plus Student 94,610 PointsHi Todd,
If you use the shorthand property -webkit-transition and specify all the values then you don't have to use the individual properties before that.
You could simplify your css to this: -webkit-transition: border-radius 2s linear 1s;
There's no need to specify the duration and delay separately before that because you're already specifying it in that shorthand property. It doesn't hurt and of course you passed but it's extra css to write.
Generally you would want to put your transition properties in the normal state and not the hover state. This way you get a smooth transition both in and out.
Todd Squitieri
8,001 PointsHi Jason!
Weird, I do see this. But there's no indication of a delay in your code? I just see a transition duration ("border radius 2s") and the linear state which I'm guessing is the part of the code that makes the transition itself smooth.
You wouldn't need to put a delay on this??
I'm sorry for pressing the issue, but I'm just curious as to how the one line solves the problem of the delay property.
Thanks so much for your feedback, Jason! I really appreciate it!
Sincerely,
Todd
Jason Anello
Courses Plus Student 94,610 PointsYes, the delay is necessary and it's the 1s that you see at the end after linear.
It may help to look at the 2 solutions for this challenge side by side.
Solution 1 using the 4 individual transition properties:
.box {
border-radius: 15px;
background: #4682B4;
-webkit-transition-property: border-radius;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
}
That one uses all 4 individual transition properties to specify each value separately.
Solution 2 using the shorthand transition property
.box {
border-radius: 15px;
background: #4682B4;
-webkit-transition: border-radius 2s linear 1s;
}
Here all 4 values are specified with the shorthand property. The delay is there at the end, 1s The duration has to come before the delay when using this shorthand property.
Let me know if this clears it up for you.
Todd Squitieri
8,001 PointsWow, this is great Jason. Thank you so much for posting such a helpful reply. Seeing the two solutions side by side has really clarified things for me.
I'm a little curious-- You don't need to put ANYTHING under the .hover pseudo-class? It's a little strange to me that the whole kit and kaboodle would go under the box class instead of the "hover," pseudo-class. Or perhaps I've missed the point entirely... again?
Sorry for pressing this issue, Jason, but this is probably one of the most difficult lessons I have encountered on TreeHouse so far (which probably sounds funny when you consider all of the really difficult courses, like Ruby, Python, etc. etc.).
Anyway, needless to say, any help is awesome! And like I said, I will totally pay it forward !
Thanks so much!
Sincerely,
Todd
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
No, you don't have to put anything relating to the transition in the :hover rule.
Think of it this way. The transition is applied to the .box element. When you apply the transition to the normal state then it is also applied in the :hover state.
Anytime the value of the border-radius changes, the transition is applied.
So when you hover over this element, the border-radius changes to 50%. This triggers the transition. The value has changed and so the transition must be applied. When you hover off the element the value changes back to 15px. Again this is a change in value which triggers the transition.
Does this help or have I confused you more?
Todd Squitieri
8,001 PointsAwesome reply, Jason! I think I get it now. You can use these vendor prefix-transition properties in the box class to create the animation that you want, all in one line which is written in the following order: duration, linear, delay (DLD).
border-radius DURATION OF TRANSFORMATION linear DELAY!
Yes, I think I'm getting it now! Thank you so much for all of your help, Jason! I really do appreciate you spending the time with me on here! Will make sure to spread the word about these transformations!
Many many thanks!
Sincerely,
Todd