If you’ve ever used CSS transitions on structural elements on your page, you may have noticed a case where you see that transition happen when the page loads and is laying itself out.
Quick video of the issue I was having:
To fix it, I just added a class of “preload” to the body element.
<body class="preload">Then ensure no transitions would happen:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}Then removed that class on page load:
$(window).load(function() {
$("body").removeClass("preload");
});Worked pretty well. It would be nice to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.
Nice :) and just 10+ lines of code. Thanks a lot. BTW, you might need an AJAX loader to indicate the fact that page is loading. You can get it from http://preloaders.net
Have you used this effect on the frog in the top right corner? :)
+1
Yep! Only kinda in reverse (triggers instead of prevents).
Why not use css animations? Wouldn’t need the javascript.
The other option is if you’re using typekit, which who isn’t these days? Then you can use the prexisting classes the it applies to the body, such as wf-loading or wf-active and some CSS to show a loading spinner when the page isn’t fully rendered, so you’re killing two birds with the same stone, both preventing FOUT and preserving animations. Of you want some examples checkout Dan Edens site for some awesome examples of both animations and gorgeous typefaces, plus he’s the creator of the incredibly amazing animate.css
Very nice, but please explain what your were developing there. (fiddle?)
I do not know exactly whether to put the CSS in the bottom of the page is valid or not. But I think we can put transition at the end of the page so that at least the effect of the transition can be initiated when the page is quite ready:
????????????????????????????????????????
You can’t put the style at the bottom, but you could put script that changes the style.
One note: Some browsers don’t understand
nonein the transition property. I’ve had to usetransition:all 0s linear;(with prefixes) to make it go away completely.Hi Chris,
I am using the same effect to fade in the content on my site on page load, however instead of removing a class from body, I just add it (“.loaded”). This way, I can trigger such effects on various elements on the page.
So, by default, we have:
And after page loads:
You can see the effect here: http://betterhtml.com
I think there is no difference between our approaches, since the final outcome is the same.
Hi Chris and Andru,
i see effect in your site, great.
opacity with visibility is equal?
And after page loads :
Hi Farzin,
Good question. You can’t use transitions on the visibility, as it can’t be animated. It has just the 2 states: visible or hidden. That’s why you need to use the opacity.
Nice, I like that. I worked at a terribly over-thought solution for this in a project and it’s nice to see it can be handled much easier #bookmarked!
Belated response, but what was the alternative solution?
Why don’t you do the opposite?
Meaning, have all the transitions in a separate CSS selection:
Body.loaded .element { transition-1: xyz;}
Then add the loaded class when the Dom is ready.
That is slick.
Possibly stating the obvious but this means that if you haven’t got js enabled you don’t get any fancy transitions. Maybe it would be worth adding the class to the body in js?
nice trick, thanks
Yup, I noticed the effect of frog on the top, its really awesome.
There is a typo with the very first word of the article. I think you meant “If you’ve…” not “I’ve you’ve…”
You should have added Narration too. I was confused initially about what is the issue.
Thanks for sharing even I’m facing similar issue :)
Another example of why we should never have started titting around animating things with CSS. Of course, people with a following who are incapable or unwilling to learn the pre-existing tools for doing so have managed to “trend” enough momentum behind this silly movement now that it’s a probably too late to reverse.
Chris, excellent post, I did notice the initial effect on the frog, clever, I am still excited about where CSS is headed, keep up the good work
I’m pretty green to CSS, but I have to say that between your blog and Treehouse my knowledge has grown 10 fold in a mere month.
You could so something like http://jsfiddle.net/PEEKt/
You can pass in an additional (fourth) argument to delay your desired effect.
The only thing I would say to be wary of is images. If your app/site has images then the two second delay may not be enough. The effect will still run while the image is being downloaded. Or even users on slower connections.
So ‘could’ be worth using this after the load event is fired.
Just another way of doing it.
Nice. The Treehouse frog trick explained.
Thanks!
Hi
Excellent article as usual, but even It’s the article I needed in just this moment.
I have done a small css3 animation and It’s triggered before the complete page is loaded.
I tried to add your jquery code, but I think I need a bit jquery for dummies (It’s the first time I add jquery code, sorry).
I added the jquery to head and class ‘preload’ to body tag:
” (…)
$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});
(…)”
However the tag ‘preload’ is not removed.
I think I have done wrong the way to link jquery library or the way of calling jquery function, but I dont’ see it now. Any help? Many thanks.
Sorry, the coded I quoted maybe It’s removed by spam.
The jquery library I added is version 3.2.2 from googleaplis.
Sorry for troubles, that’s I mean:
“(…)
“
Hi Dave,
One advice:
Try placing your javascript files and scripts at the bottom of the page, just before the closing body tag instead of the head. When the page loads, your priority is to load the content and styles first and then the js.
Unless you’re using some script like Modernizr that needs to be executed right away.
As for your code, try removing the quotes on “window”:
Hi Andru
Many thanks, I removed the quotes in ‘window’ and works now.
Also, I will study placing js code before </body>
Best regards,
You’re welcome Dave. Glad it works now!
$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});
cool method,that I have used.
Haha this is good, I noticed the effect of frog on the top, its really awesome.
Hey Andru! The Treehouse frog trick is nicely explained.
Thank you!
Thanks for this solution, however if you use prefix free it no longer works :(
Wouldn’t be 95% effective to trigger ANY layout or critical transition with:
body:hover #target_elem:hover { transition: … }?
After all, there are 90% chances of the mouse being over the page when it loads, and even more chances of the visitor lOOking at it if the pointer is moving. (if the pointer is not moving there are more chances of the visitor is not paying attention to the screen.)
Also, wouldn’t be also better to find WHY transitions are triggering in first place? They don’t trigger on load by default. Only if the property changed.
:hover wouldn’t work for a lot of touch devices.
You’re right though. I think the why is quite important here, and I haven’t seen it talked about anywhere here. I feel as if it’s a browser bug.
I’m using the exact same HTML & CSS on the element that is being affected by this. I tried cutting out all other HTML to see if that showed up anything, and lo, the loading transition doesn’t happen.
I’ll report back when I fix it.