ランダムにキューブを動かす

人のソースみて勉強したやつの技術を使ってよくわかんないのを作ってみた。
よくわかんないの

キューブの動くタイミングや動き方はCSS、色や大きさをランダムで変えるのはJSの方に書いてる。

CSS

body {
  background: #F9F9F9;
  margin: 15px;
}
.item {
  float: left;
  width: 3rem;
  height: 3rem;
  backface-visibility: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

動かすセンスがなさすぎて、タイミングの設定とかどうすればいい感じにできるのかさっぱりわからん。

JS

$(function() {

  //マテリアルデザインチックな配色
  var myColors = [
        '#224687',
        '#2ABFD4',
        '#FFCD40',
        '#E61875',
        '#8BC34A',
        '#AB47BC'
      ];

  //描画
  function draw(){

    var color = myColors[Math.floor(Math.random() * myColors.length)];

    //DIV生成
    var item = $("<div>",{
        "class" : "item",
        css : {
          backgroundColor: color,
          transform: "scale(0)"
        }
    }).appendTo(document.body);

    //ランダムで色、大きさ変える
    setInterval((function() {
      item.css ({
        backgroundColor: myColors[Math.floor(Math.random() * myColors.length)],
        transform: "scale(" + Math.random() +")",
        borderRadius: "10%",
        opacity: 1
      })
    }),  Math.random() * 500 + 500);

  };

  //量産して描画
  for (var i = 0; i < 81; i++) {
    draw();
  }

  //微妙なhover処理
  $(".item").hover(
    function(){
      $(this).stop().animate({
        borderRadius: "50%",
        transform: "scale(1)",
        opacity: 0.5
      }, 100);
    }
  );


});

scaleで拡大させてるから、
キューブが小さいときにhoverしても大きくならないのが微妙すぎる。

もうちょっと頑張ってインタラクティブなのを作りたい。