Delayed fade-in effects with css3 Transition

Code for Delayed fade-in effects with css3 Transition for div with css3. Use the following html and css.

<ol>
    <li>
        <div class="fade-in one">
            <div class="box" style="background:#d10000;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in two">
            <div class="box" style="background:#ff6622;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in three">
            <div class="box" style="background:#ffda21;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in four">
            <div class="box" style="background:#33dd00;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in five">
            <div class="box" style="background:#1133cc;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in six">
            <div class="box" style="background:#220066;"></div>
        </div>
    </li>
    <li>
        <div class="fade-in seven">
            <div class="box" style="background:#330044;"></div>
        </div>
    </li>
  <li>

ol {
  list-style: none;
}
ol li {
  display: inline-block;
}
.fade-in .box{
  height: 260px;
  width: 160px;
}

/* Keyframes for the fade-in */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;
  opacity: 1 \9; /*just in case ie*/
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.fade-in.two {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s;
}

.fade-in.three {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  animation-delay: .6s;
}
.fade-in.four {
  -webkit-animation-delay: .9s;
  -moz-animation-delay: .9s;
  animation-delay: .9s;
}

.fade-in.five {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.six {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.fade-in.seven {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.fade-in.eight {
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.fade-in.nine {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.fade-in.ten {
  -webkit-animation-delay: 2.7s;
  -moz-animation-delay: 2.7s;
  animation-delay: 2.7s;
}

.fade-in.eleven {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}

.fade-in.twelve {
  -webkit-animation-delay: 3.3s;
  -moz-animation-delay: 3.3s;
  animation-delay: 3.3s;
}