"cannot dynamically set initial element translation before transition in same call stack" Code Answer

because of the computation costs associated with each reflow, most browsers optimize the reflow process by queuing changes and performing them in batches. in this case, you are overwriting the inline style information of the elements, which the browser recognizes. the browser queues the first change and then the second before finally deciding that a reflow should occur, which it does all-at-once. (it doesn't matter that you have separated the changes into two function calls.) this would similarly happen when trying to update any other style property.

you can always force the browser to reflow by using any of the following:

• offsettop, offsetleft, offsetwidth, offsetheight
• scrolltop, scrollleft, scrollwidth, scrollheight
• clienttop, clientleft, clientwidth, clientheight
• getcomputedstyle() (currentstyle in ie)

so just change your first function to this:

var computedstyles = [];

function setanimation() {
    div1.style.webkittransform = 'matrix(1,0,0,1,1200,0)';
    div2.style.webkittransform = 'matrix(1,0,0,1,0,0)';

    // force div's 1 and 2 to reflow
    computedstyles[div1] = div1.clientheight;
    computedstyles[div2] = div2.clientheight;
}

and now the browser will perform the initial transformations. you don't need two functions to accomplish this, just force the reflow in-between.

due to some headaches that can occur when trying to solve reflow/repaint issues like this, i always suggest using css animations, even if you have to dynamically create and remove style rules from a stylesheet using the cssom. read more here: programmatically changing webkit-transformation values in animation rules