javascript - 追加された CSS アニメーション div の負荷に対するパフォーマンス

Question

体にランダムに追加されたdivがたくさんあります：

for(var i = 0; i < 1020; i++) {
    var randomleft = Math.floor(Math.random()*Math.floor(Math.random()*1500)),
    randomtop = Math.floor(Math.random()*Math.floor(Math.random()*1500));
    allCubes += '<div id="cube'+i+'" class="cube" style="position: absolute; left: '+randomleft+'px; top: '+randomtop+'px; width: 7px; height: 7px; z-index: -1;"></div>';
}  
    $('body').append(allCubes);

    for (var i = 0; i < 1020; i++) {
       cubes['cube' + i] = $('#cube' + i)
    }

それらには、1つのdivに関連するすべてのdivをアニメーション化する機能があります#fixed。

var row = 9,        
        t = 0;
        $fixed.css({'background-color': '#000', left: '25%', top: '35%'});
    var fixedOffs = $fixed.offset();


    cubes[0].transition({ top: fixedOffs.top+row, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[1].transition({ top: fixedOffs.top+row*2, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[2].transition({ top: fixedOffs.top+row*3, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[3].transition({ top: fixedOffs.top+row*4, left: fixedOffs.left+row, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
      // until cubes[1019]...

ええ、各divのすべての数字と座標を書き留めています。私はcss3トランジション（のような構文を持つtransit.js .animate()）を使用して、可能な限りパフォーマンスを高めています。しかし残念なことに、それは本当に遅いです。私が望むように、この大量のdivを処理する方法を誰かが考えていますか?

注: すべての単一の div には独自の位置があり、システムはありますが、毎回異なります。