Если я запускаю что-то вроде этого:

var div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2');

function setAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,1200,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,0,0)';
    div1.style.webkitTransition = div2.style.webkitTransition = '-webkit-transform 2s ease';
}

function startAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,0,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,-1200,0)';
}

 setAnimation();
startAnimation();​

div2 отлично анимирует за кадром, но div1 остается на своем месте в 0,0, а изменения никогда не видны.

Если я удаляю startAnimation вообще и меняю setAnimation на:

function setAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,500,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,-500,0)';
    div1.style.webkitTransition = div2.style.webkitTransition = '-webkit-transform 2s ease';
}

Я бы видел, как оба элемента анимируются в этих позициях, начиная с 0,0.

Похоже, что первоначальный перевод не может быть установлен динамически в том же стеке вызовов, что и параметр перехода? Или, более ясно, если переход и преобразование установлены в одном стеке вызовов, переход всегда будет иметь приоритет.

Почему это?