When are CSS transitions fired?

Question

I'd like to fade a page in. It should fade in as soon as possible i.e. not wait for images to load.

I have an html page with

<div class="content">
   text, images
</div>

I have css like

.content{
    opacity:0;
    transition: opacity 0.3s ease-in-out;
}

and just above the </body> I have

$( document ).ready(function() {
    $(".content").css("opacity",1);
});

but it feels like a long time loading if a page has lots of images. I thought this was supposed to fire as soon as the DOM is written to the browser?

I tried removing document ready but it was the same. So I was wondering, when is the CSS transition triggered? Is it later than document ready?

The effect I'm going for is for pages to fade up.

Answer 1

How about using animate function instead of css like this?

$( document ).ready(function() {
    $(".content").delay(1).animate({opacity:1});
});

Answer 2

According to this transition starts when some style changed event is called (as I see it is a browser specific stuff). The problem is we can't be sure it is called before DOM fully loaded:

Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

I don't think that this event would be raised before DOM is loaded.

Accroding to this I think if you need transitions before DOM is loaded then it's better to use jQuery to animate your elements as C-link suggested. If it is ok to start transitions after use this question: Using CSS for fade-in effect on page load