It's described here: https://css-tricks.com/transitions-only-after-page-load/
It basically forbids transitions, then re-allows it when the page is loaded.
In html:
<body class="preload">
In css:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
In the header:
$(window).load(function() {
$("body").removeClass("preload");
});
For now, all I have is, at the end of the footer, a javascript which forbids the page to show as long as all is not loaded (it was meant for the welcome image, at first, not for the transition), but it's not enough sometimes with firefox to avoid showing transitions:
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
