Googleのマテリアルデザインの左上からななめに表示するやつ

人のソースを見て勉強しようシリーズ第3弾
Google Material Design Hierarchical Timing デモ

今回の参考ソースはここ

CSS3にアニメーション、JSにはタイミングとか記述してる。

CSS

.container {
  width: 460px;
}
.item {
  transform: scale(1);　                 //要素の拡大
  transition-timing-function: ease-out;  //ゆっくり終わる
  backface-visibility: hidden;　         //ちらつき対策
  perspective: 1000;　                   //3D変形の奥行き　Firefox用...?
}
.visible {
  transform: scale(0);
}

どうして backface-visibility: hidden; を入れてるんだろうと思って、調べてみたら、CSSのTransformsでTransitionと組み合わせて、要素を移動させたり、拡大縮小させたりするとちらつくことがあるので、その対策としていれてるっぽい。
perspective: 1000;　の方は何で入れてるかわからなかったけど、2年前の記事でFirefoxの Transforms がいけてないというのがあったのでその対応策とか...?

JS

(function() {
  var appear,
      delay,
      disappear,
      i,
      offset,
      _i,
      _len,
      item;

  item = $(".item");
  for (_i = 0, _len = item.length; _i < _len; _i++) {
    i = item[_i];
    offset = i.offsetLeft + i.offsetTop;
    delay = offset / 1000;
    $(i).html(delay); //.itemに時間を表示
    $(i).css({
      'transition-delay': "" + (delay * 1.318) + "s", //アニメーションがはじまるタイミング
      'transition-duration': "" + 0.3 + "s" //アニメーションにかかる時間
    });
  }

  //.itemを非表示にしていく
  appear = function() {
    return setTimeout((function() {
      $('.item').addClass('visible');
      return disappear();
    }), 1500);
  };

  //.itemを表示    
  disappear = function() {
    return setTimeout((function() {
      $('.item').removeClass('visible');
      return appear();
    }), 1500);
  };

  appear();

}).call(this);

表示の方法は.visibleを付けたり消したりして行うので基本の動きはCSS3。
表示非表示のタイミングについては.itemのx,y座標を足して1000で割った値に1.318かけた値にしてるみたい。この1.318という数値設定が謎。好み？

あとなんで即時関数に.call(this);つけるの？って思ったら関数内のthisがundefinedになるかららしい。
（もともとCoffeeで書かれてたのをコンパイルするとそうなるっぽい。）