Why is my transition time not being applied?

I am pushing each raindrop into rainDropArray, then I thought to call a function within the rainDropInterval, hmm(), and Im getting the transformation, just not the timed transition.

var rainDropArray = []; 
var rainDrop;
var randomDrop;
var yourTankOverThere;
var a=0;    
var rainDropInterval = setInterval(function(){

randomDrop = Math.floor(Math.random()*1000);    
rainDrop = 
document.createElement('div');
document.body.appendChild(rainDrop);rainDrop.style='box- 
sizing:border-box;border:1px solid green;height:7px;width:7px;background- 
color:green;position:absolute;top:0px;left:'+randomDrop+'px;transition:transform 
10s';
rainDrop.setAttribute('id','drop'+a);
yourTankOverThere 
=document.querySelector("#drop"+a);rainDropArray.push(yourTankOverThere);


 hmm();  


 },100);    
 function hmm() 
 {rainDropArray[a].style.transform="matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1000,0,1)";a++}