/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn {
from {
	opacity: 0;
	opacity: 1\9; /* IE9 only */
}
to {
	opacity: 1;
} }
@-moz-keyframes
fadeIn {from {
	opacity: 0;
	opacity: 1\9; /* IE9 only */
}
to {
	opacity: 1;
} }
@keyframes
fadeIn {from {
	opacity: 0;
	opacity: 1\9; /* IE9 only */
}
to {
	opacity: 1;
} }

.fade-in {
	opacity: 0; /* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}
.fade-in.half {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

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

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

.fade-in.three {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.fade-in.four {
	-webkit-animation-delay: 2.0s;
	-moz-animation-delay: 2.0s;
	animation-delay: 2.0s;
}

.fade-in.five {
	-webkit-animation-delay: 2.3s;
	-moz-animation-delay: 2.3s;
	animation-delay: 2.3s;
}
.fade-in.six {
	-webkit-animation-delay: 2.6s;
	-moz-animation-delay: 2.6s;
	animation-delay: 2.6s;
}

/*---make a basic box ---*/
.box {
	width: 100px;
	height: 100px;
	position: relative;
	margin: 10px;
	color: white;
	padding: 40px;
	float: left;
	border: 1px solid #fff;
	background: #27a5d2;
	border-radius: 10px;
}