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.

Have you tried a script at the end of the body that executes your jquery? — Seano666, Jan 16 '14 at 04:34
It's a great question! This will take some testing.. Very curious to see responses and answers to this one! — Bryan Elliott, Jan 16 '14 at 04:37
This is a related question http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load that may help in answering. — aarti, Jan 16 '14 at 04:38

score 1 · Answer 1 · answered Jan 16 '14 at 04:44

1

How about using animate function instead of css like this?

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

answered Jan 16 '14 at 04:44

Bhojendra Rauniyar

83,432
35
168
231

score 1 · Answer 2 · edited May 23 '17 at 12:13

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

When are CSS transitions fired?

2 Answers2