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

CSS

Posted by John Sanford
John Sanford
4,134 Points

Issues with -- Code Challenge: Transitions - WebKit Only

I struggled with this code challenge. I think there might be a behind the scenes issue with it. Admittedly, I had an issue with specifying the border-radius property and was simply transitioning the background, so it's not totally broken. But when I corrected my mistake and thought I had it correct, hit the refresh button, no result, still with unmodified transition action.

I moved from one selector to the other, thinking my placement was wrong, the result being action like nothing has been coded.

my selector was

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

I tried it initially in the .box:hover section, but then moved it to the .box section to no effect either time.

I eventually solved the issue by coding each -webkit-transition property individually, but only enough to get past the check work button. When hitting the refresh button, it really doesn't have any kind of a delay effect, its still just a stark transition.

Is there something wrong with my setup or coding?

1 Answer

Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

This is a transition for webkit based browsers only, you wouldn't happen to be using Firefox or another non-webkit based browser would you? ;)

The result on the right will only show you the code on the left, in this case, the webkit transition will show no difference on Firefox etc, but you will see it in Chrome or Safari. Otherwise, the only thing you'll see is the result of your regular hover pseudoclass.

Hope that helps! :)

John Sanford
John Sanford
4,134 Points

Nope, using Safari here. I think I tried removing the -webkit- prefix to elicit a difference, but no dice, same result. I'll try to take some time out from my work/educational schedule to fool around with the code locally to see if I can isolate and duplicate the results.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Safari is a webkit browser. Make sure the transition code is in the box selector, not the hover pseudoclass selector. If not, I can assure you it looks like you are doing everything ok. Perhaps open up the codepen and see if it works in there with the code from the previous video.

Unsubscribed User
Unsubscribed User
8,947 Points

This happened to me as well. The transition effect didn't show after hitting Refresh, but I passed the Code Challenge. Used Safari 6.0.5.

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

.box:hover {
background: #F08080;
border-radius: 50%;
}
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

That code is fine. Don't forget there is a delay of 1 second for the transition. The same code works fine for me in Google Chrome. Don't worry about it.