¿Por qué Chrome no visualiza la transición mediante Javascript?

[berkeleyPunk]

Buen día.

La idea es esta: tenemos 2 cajas, una negra y otra azul. La azul está atrás de la negra. Después de 1 segundo la azul se posiciona abajo de la caja negra.

Utilizo el siguiente código para hacer dicha transición. Pero no funciona en Chrome. Sí en Firefox, sí en Opera, y sí funciona hasta en IE11. Pero no en Google Chrome.

¿Por qué?

Código HTML:

<div id="div_1">
  </div>
  
  <div id="div_2">
  </div>
 

Código CSS:

#div_1, #div_2 {
    position:absolute;
    top:100px;
    left:0;
    width:200px;
    height:200px;
    background-color:black;
    -webkit-transition:all ease 1s;
    -moz-transition:all ease 1s;
    -ms-transition:all ease 1s;
    -o-transition:all ease 1s;
    transition:all ease 1s;
    z-index:1000;
}
#div_2 { z-index:999; background-color:blue; }
 

Código Javascript:

window.onload = function()
   {
       var x = true;           
       
       if ( x == true )
       {
           document.getElementById("div_1").style.transform = "translate(0px,-20%)";
           document.getElementById("div_2").style.transform = "translate(0px,80%)";
       }
   }
 

Saludos cordiales.