Anima√ß√£o CSS3 ‘efeito domin√≥’ usando SASS

Então, para meu projeto atual, precisei animar caixas e fade-las uma após a outra. Abaixo está uma captura de tela.
Cen√°rio

HTML

<section>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</section>
<section>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</section>
<section>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</section>
<section>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</section>

SASS
Para o loop, estou direcionando divs dentro de uma se√ß√£o espec√≠fica e determinando a ordem da se√ß√£o usando ‘nth-child’. Dentro do loop, acabei de adicionar um atraso de 0,2 segundo para cada se√ß√£o.

/* mixins to make our lives easier */
@mixin animation($name, $duration, $ease, $delay, $direction) {
-webkit-animation: $name $duration $ease $delay $direction;
-moz-animation: $name $duration $ease $delay $direction;
-o-animation: $name $duration $ease $delay $direction;
-ms-animation: $name $duration $ease $delay $direction;
animation
: $name $duration $ease $delay $direction;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content; }
@-o-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}

section
{ clear: left; }
div
{
float: left;
width
: 50px; height: 50px;
margin
: 0 2px 2px 0;
/* loop */
$i
: 0s;
@for $level from 0 to 5 {
section
:nth-child(#{$level + 1}) & {
@include animation(fade, 1.2s, linear, $i, both);
}
$i
: $i + .2s;
}
}

@include keyframes(fade) {
0% {background:rgba(0,0,0,1);}
50% {background:rgba(0,0,0,.5);}
100% {background:rgba(0,0,0,.1);}
}

Equivalente CSS – gaah!

section { clear: left; }
div
{
float: left;
width
: 50px; height: 50px;
margin
: 0 2px 2px 0; }
section
:nth-child(1) div {
-webkit-animation: fade 1.2s linear 0s both;
-moz-animation: fade 1.2s linear 0s both;
-o-animation: fade 1.2s linear 0s both;
-ms-animation: fade 1.2s linear 0s both;
animation
: fade 1.2s linear 0s both; }
section
:nth-child(2) div {
-webkit-animation: fade 1.2s linear 0.2s both;
-moz-animation: fade 1.2s linear 0.2s both;
-o-animation: fade 1.2s linear 0.2s both;
-ms-animation: fade 1.2s linear 0.2s both;
animation
: fade 1.2s linear 0.2s both; }
section
:nth-child(3) div {
-webkit-animation: fade 1.2s linear 0.4s both;
-moz-animation: fade 1.2s linear 0.4s both;
-o-animation: fade 1.2s linear 0.4s both;
-ms-animation: fade 1.2s linear 0.4s both;
animation
: fade 1.2s linear 0.4s both; }
section
:nth-child(4) div {
-webkit-animation: fade 1.2s linear 0.6s both;
-moz-animation: fade 1.2s linear 0.6s both;
-o-animation: fade 1.2s linear 0.6s both;
-ms-animation: fade 1.2s linear 0.6s both;
animation
: fade 1.2s linear 0.6s both; }
section
:nth-child(5) div {
-webkit-animation: fade 1.2s linear 0.8s both;
-moz-animation: fade 1.2s linear 0.8s both;
-o-animation: fade 1.2s linear 0.8s both;
-ms-animation: fade 1.2s linear 0.8s both;
animation
: fade 1.2s linear 0.8s both; }

@-webkit-keyframes fade {
0% {background: black; }
50% {background: rgba(0, 0, 0, 0.5); }
100% {background: rgba(0, 0, 0, 0.1); } }
@-moz-keyframes fade {
0% {background: black; }
50% {background: rgba(0, 0, 0, 0.5); }
100% {background: rgba(0, 0, 0, 0.1); } }
@-o-keyframes fade {
0% {background: black; }
50% {background: rgba(0, 0, 0, 0.5); }
100% {background: rgba(0, 0, 0, 0.1); } }
@-ms-keyframes fade {
0% {background: black; }
50% {background: rgba(0, 0, 0, 0.5); }
100% {background: rgba(0, 0, 0, 0.1); } }
@keyframes fade {
0% {background: black; }
50% {background: rgba(0, 0, 0, 0.5); }
100% {background: rgba(0, 0, 0, 0.1); } }

DEMO
http://codepen.io/joannaong/pen/xepik