Using CSS animation while javascript computes

Question

I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit.

I was wondering if there is any way to let something animate while the javascript is executing?

I know I can manage to give back control to the browser from time to time to let it refresh, but I find it silly that computing something in background with javascript just freeze your whole interface.

EDIT: Here is a dumb example of what I am talking about: http://jsfiddle.net/YWefx/13/ If you disable the css transitions, the bar is updated on each iteration, but if you enable it, the transition will only occur at the very end. So I end up with either having to wait 400ms between each loop, loosing 4 seconds doing nothing but animations, having a smooth animation at the end (loosing the benefits of displaying a progress bar), or not animating the bar.

Answer 1

CSS3 animations do not get blocked by Javascript unless there is some intense processing going on (in which case you could get stutters).

If you are triggering them during the load I could see them getting delayed until they get to that portion of the script.

One way around this is to setTimeouts at the very beginning of the script to trigger animation changes at certain times.

Another (perhaps better) option would be to use keyframes. Make sure to call this before the loading begins. http://dev.w3.org/csswg/css3-animations/#keyframes