Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  	<h2>Grid Animation</h2>
  </header>
  <section>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  </section>

  <footer>
  	<a class="btn btn-binding" href="##" id="btn-binding">Show Items</a>
  </footer>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
  	$(function(){
  		$('#btn-binding').click(function(){
		  $('section').toggleClass('show');
		  $(this).html($('.btn-binding').html() == 'Show Items' ? 'Hide Items': 'Show Items');
		  return false;
		});
  	});
  </script>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$spacing  : 3px;
$size     : 88px;
$duration : 0.35s;
//$delay: 80.25ms;
$ease-out : cubic-bezier(0.25, 0.8, 0.25, 1);
$ease-in  : cubic-bezier(0.55, 0, 0.55, 0.2);
$colors   : (
  darkPrimary: #303F9F,
  lightPrimary: #C5CAE9,
  primary: #3F51B5,
  accent: #8BC34A,
  primaryText: #212121,
  secondaryText: #727272,
  divider: #B6B6B6,
  text: #FFFFFF,
  border-color: #e7e7e7
);


html {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	  margin: 0;
		padding: 0;
		box-sizing: inherit;
}

body {
	height: 100vh;
	font-family: "Roboto", sans-serif;
	display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
	box-orient: vertical;
	-webkit-box-direction: normal;
	box-direction: normal;
	background-color: #fff;
}

header {
	background: map-get($colors, darkPrimary);
  height: $size * 0.5;
  line-height: $size * .5;
  text-align: center;
  
  h2 {
    margin: 0;
    color: map-get($colors, text);
  }
}
@mixin scale-in($items:15,$delay:80.25ms){
  @for $item from 1 through $items{
    &:nth-child(#{$item}) {
      transition-delay: $delay * ($item - 1);
    }
  } 
}

section {
  -webkit-box-flex: 1;
  box-flex: 1;
  padding: $spacing * 2;
  overflow: hidden;
  margin: $spacing 0;
  
  .item {
    background: map-get($colors, accent);
    color: map-get($colors, text);
    width: $size;
    height: $size;
    float: left;
    margin: 0 $spacing $spacing 0;
    text-align: center;
    line-height: $size;
    font-size: 46px;
    border-radius: 3px;
    transition: $duration $ease-in;
    transform: scale(0);
    
    @include scale-in(15,80.25ms);
  }  
  &.show {
    .item {
      transform: scale(1);
    }
  }
}

footer {
  height: $size;
  line-height: $size;
  text-align: center;
}
.btn {
  width: ($spacing + $size) * 2 - $spacing;
  background: map-get($colors, primary);
  color: map-get($colors, text);
  font-size: 14px;
  letter-spacing: 0.03em;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px;
  margin: 0 $spacing $spacing 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  height: $size * 0.5;
  line-height: $size * 0.5;
  &:hover {
    background: tint(map-get($colors, primary), 15%);
  }
}

SassMeister-output.css

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  height: 100vh;
  font-family: "Roboto", sans-serif;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  box-direction: normal;
  background-color: #fff;
}

header {
  background: #303F9F;
  height: 44px;
  line-height: 44px;
  text-align: center;
}
header h2 {
  margin: 0;
  color: #FFFFFF;
}

section {
  -webkit-box-flex: 1;
  box-flex: 1;
  padding: 6px;
  overflow: hidden;
  margin: 3px 0;
}
section .item {
  background: #8BC34A;
  color: #FFFFFF;
  width: 88px;
  height: 88px;
  float: left;
  margin: 0 3px 3px 0;
  text-align: center;
  line-height: 88px;
  font-size: 46px;
  border-radius: 3px;
  transition: 0.35s cubic-bezier(0.55, 0, 0.55, 0.2);
  transform: scale(0);
}
section .item:nth-child(1) {
  transition-delay: 0ms;
}
section .item:nth-child(2) {
  transition-delay: 80.25ms;
}
section .item:nth-child(3) {
  transition-delay: 160.5ms;
}
section .item:nth-child(4) {
  transition-delay: 240.75ms;
}
section .item:nth-child(5) {
  transition-delay: 321ms;
}
section .item:nth-child(6) {
  transition-delay: 401.25ms;
}
section .item:nth-child(7) {
  transition-delay: 481.5ms;
}
section .item:nth-child(8) {
  transition-delay: 561.75ms;
}
section .item:nth-child(9) {
  transition-delay: 642ms;
}
section .item:nth-child(10) {
  transition-delay: 722.25ms;
}
section .item:nth-child(11) {
  transition-delay: 802.5ms;
}
section .item:nth-child(12) {
  transition-delay: 882.75ms;
}
section .item:nth-child(13) {
  transition-delay: 963ms;
}
section .item:nth-child(14) {
  transition-delay: 1043.25ms;
}
section .item:nth-child(15) {
  transition-delay: 1123.5ms;
}
section.show .item {
  transform: scale(1);
}

footer {
  height: 88px;
  line-height: 88px;
  text-align: center;
}

.btn {
  width: 179px;
  background: #3F51B5;
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 0.03em;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px;
  margin: 0 3px 3px 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  height: 44px;
  line-height: 44px;
}
.btn:hover {
  background: #5b6bc0;
}

SassMeister-rendered.html

<header>
  	<h2>Grid Animation</h2>
  </header>
  <section>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  </section>

  <footer>
  	<a class="btn btn-binding" href="##" id="btn-binding">Show Items</a>
  </footer>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
  	$(function(){
  		$('#btn-binding').click(function(){
		  $('section').toggleClass('show');
		  $(this).html($('.btn-binding').html() == 'Show Items' ? 'Hide Items': 'Show Items');
		  return false;
		});
  	});
  </script>