A Pen by Leo.

Google-Material-design-Animation->-Meaningful-Transitions->-Hierarchical-Timing.markdown

Google Material design Animation > Meaningful Transitions > Hierarchical Timing

http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing

A Pen by Leo on CodePen.

License.

index.html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

style.css

ul {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;  
  width: 415px;
  height: 215px;
  padding: 0;
}

li {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0px;
  background: #5089FB;

  transform:         scale(0);
  -o-transform:      scale(0);
  -ms-transform:     scale(0);
  -moz-transform:    scale(0);
  -webkit-transform: scale(0);

  animation:         display 5s infinite;
  -o-animation:      display 5s infinite;
  -ms-animation:     display 5s infinite;
  -moz-animation:    display 5s infinite;
  -webkit-animation: display 5s infinite;
}

@keyframes display {
	from, 80%, to { transform: scale(0); }
	4%, 76%   { transform: scale(1); }
}
@-o-keyframes display {
	from, 80%, to { -o-transform: scale(0); }
	4%, 76%   { -o-transform: scale(1); }
}
@-ms-keyframes display {
	from, 80%, to { -ms-transform: scale(0); }
	4%, 76%   { -ms-transform: scale(1); }
}
@-moz-keyframes display {
	from, 80%, to { -moz-transform: scale(0); }
	4%, 76%   { -moz-transform: scale(1); }
}
@-webkit-keyframes display {
	from, 80%, to { -webkit-transform: scale(0); }
	4%, 76%   { -webkit-transform: scale(1); }
}

li:nth-child(2) {
  animation-delay:         .2s;
  -o-animation-delay:      .2s;
  -ms-animation-delay:     .2s;
  -moz-animation-delay:    .2s;
  -webkit-animation-delay: .2s;
}
li:nth-child(3) {
  animation-delay:         .3s;
  -o-animation-delay:      .3s;
  -ms-animation-delay:     .3s;
  -moz-animation-delay:    .3s;
  -webkit-animation-delay: .3s;
}
li:nth-child(4) {
  animation-delay:         .4s;
  -o-animation-delay:      .4s;
  -ms-animation-delay:     .4s;
  -moz-animation-delay:    .4s;
  -webkit-animation-delay: .4s;
}
li:nth-child(5) {
  animation-delay:         .5s;
  -o-animation-delay:      .5s;
  -ms-animation-delay:     .5s;
  -moz-animation-delay:    .5s;
  -webkit-animation-delay: .5s;
}
li:nth-child(6) {
  animation-delay:         .6s;
  -o-animation-delay:      .6s;
  -ms-animation-delay:     .6s;
  -moz-animation-delay:    .6s;
  -webkit-animation-delay: .6s;
}
li:nth-child(7) {
  animation-delay:         .7s;
  -o-animation-delay:      .7s;
  -ms-animation-delay:     .7s;
  -moz-animation-delay:    .7s;
  -webkit-animation-delay: .7s;
}
li:nth-child(8) {
  animation-delay:         .8s;
  -o-animation-delay:      .8s;
  -ms-animation-delay:     .8s;
  -moz-animation-delay:    .8s;
  -webkit-animation-delay: .8s;
}