Cacher is the code snippet organizer for pro developers

/* #demo style - you can delete it */
#demo {
  position: relative;
  margin: 30px auto;
  width: 455px;
  padding: 0;
}

#demo > * {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 5px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  background-color: #03a9f4;
}

/* core style - don't delete */
// Mixin
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
      -ms-transform: scale(@ratio); // IE9 only
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

// Animation
.display-animation > * {
  .scale(0);
}
.display-animation > .animated {
  .scale(1); 
  .transition(all .3s cubic-bezier(.55,0,.1,1)); // "Swift Out" easing curve
}
// for no-js (if you use modernizr, if don't - you can write own class for this sort of situations)
.no-js .display-animation > * {
  .scale(1);
}

/**
 * Created by Kupletsky Sergey on 16.09.14.
 *
 * Hierarchical timing
 * Add specific delay for CSS3-transition to elements.
 */

(function($) {
  var speed = 900;
  var container =  $('.display-animation');  
  container.each(function() {   
    var elements = $(this).children();
    elements.each(function() {      
      var elementOffset = $(this).offset(); 
      var offset = elementOffset.left*0.8 + elementOffset.top;
      var delay = parseFloat(offset/speed).toFixed(2);
      $(this)
        .css("-webkit-transition-delay", delay+'s')
        .css("-o-transition-delay", delay+'s')
        .css("transition-delay", delay+'s')
        .addClass('animated');
    });
  });
})(jQuery);

<!-- Use class .display-animation for your container -->
<h2 style="text-align: center;">Material Design Animation Timing</h2>
<ul id="demo" class="display-animation">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>