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
Derek Zinger
3,337 PointsTransition being applied on page load?
I've got my transition effect working properly on mouseover. however, it also seems to be producing a second effect on page load. Here's my CSS:
.box {
border-radius: 15px;
background: #4682B4;
-webkit-transition: border-radius 2s linear 1s;
}
.box:hover {
background: #F08080;
border-radius: 50%;
}
Again, the hover effect works perfectly. But I'm also seeing the box load with ZERO border-radius, wait one second and then transition to a 15px border over a duration of 2 seconds. I am not mousing over anything.
Why is this happening? Isn't a transition supposed to be applied when an item changes state? What state change is happening here?
Any help would be appreciated. Thanks!
6 Answers
Derek Zinger
3,337 PointsThis question is answered. The problem was a glitch with the Treehouse Code Challenge editor and not with my code.
Adam Sackfield
Courses Plus Student 19,663 PointsYou are adding a 1s delay as the last property on the transition. For it to be instant just remove the "1s"
Derek Zinger
3,337 PointsCool. Indeed I've just hit the "Check work" button and it's let me through! All fixed. Thanks again for the kindness, Adam.
Adam Sackfield
Courses Plus Student 19,663 PointsAnytime!
Derek Zinger
3,337 PointsThanks for the reply, Adam. However, my issue isn't that there's a delay, but rather that I'm effectively getting two transitions: one on mouseover and one on page load.
Adam Sackfield
Courses Plus Student 19,663 Pointshere is a pen with your code. I see no effect on page load, it could just be a delay on your end while the stylesheet is loaded and the rule is applied. Where are you testing?
Derek Zinger
3,337 PointsYeah it looks right on CodePen. My code is just on the Treehouse code challenge page. I'll try again and see if a fresh start fixes the issue. Thanks, Adam.
Derek Zinger
3,337 PointsNope, no dice. Still getting the sharp corners on load, followed by an unsolicited transition to 15px corners. Weird.
Adam Sackfield
Courses Plus Student 19,663 PointsAh so it's in a code challenge your seeing it. I would put it down to the server response, first it will load the HTML and then Cascade down the stylesheet, the delay in adding the original border-radius will be the code engine on this site I would assume and this would not happen in a live site.