Skip to content

Instantly share code, notes, and snippets.

Last active December 28, 2015 13:38
What would you like to do?
<div class="fade-in one">
<div class="box" style="background:#d10000;"></div>
<div class="fade-in two">
<div class="box" style="background:#ff6622;"></div>
<div class="fade-in three">
<div class="box" style="background:#ffda21;"></div>
<div class="fade-in four">
<div class="box" style="background:#33dd00;"></div>
<div class="fade-in five">
<div class="box" style="background:#1133cc;"></div>
<div class="fade-in six">
<div class="box" style="background:#220066;"></div>
<div class="fade-in seven">
<div class="box" style="background:#330044;"></div>
/* 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: 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-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;
animation-delay: 1.2s;
.fade-in.six {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
} {
-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;
.box {
width: 60px;
height: 20px;
display: block;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment