CSS3 List Item fade-in

Uses CSS3 transitions to fade list items in at staggered intervals. Uses HTML and CSS.

by sevendaysout

HTML

<div class="container">
		<div class="mike">
			<ul class="fa-ul slide">
				<li class="name"><i class="fa-li fa fa-user"></i>i am mike</li>
				<li class="job"><i class="fa-li fa fa-laptop"></i>i build things on the web</li>
				<li class="location"><i class="fa-li fa fa-map-marker"></i>i live in saint louis</li>
				<li class="twitter"><i class="fa-li fa fa-twitter"></i>i tweet on twitter</li>
				<li class="github"><i class="fa-li fa fa-github"></i>i code on github</li>
				<li class="instagram"><i class="fa-li fa fa-instagram"></i>i photograph on instagram</li>
				<li class="linkedin"><i class="fa-li fa fa-linkedin-square"></i>i connect on linkedin</li>
			</ul>
		</div>
	</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
	font-family: Sans-Serif;
	font-weight: 400;
	font-size: 18px;
	background-color: #fafafa;
	color: #646464;
}

.mike {
	margin-top: 10%;
	margin-left: 20%;
	overflow: hidden;
}

a,
a:visited {
  text-decoration: none;
  color: #3790FF;
}

a:hover {
	text-decoration: underline;
}

/* responsive sizing for phones and tablets */
@media screen and (max-width: 979px) {
	.mike {
		margin-top: 20%;
		margin-left: 10%;
	}
}

/* fade in */
li {
    opacity: 0;
}

li.name {
	-webkit-animation: fade 2s ease-in-out left;
	-webkit-animation-delay: 1s;
	-moz-animation: fade 2s ease-in-out left;
	-moz-animation-delay: 1s;
	-o-animation: fade 2s ease-in-out left;
	-o-animation-delay: 1s;
	animation: fade 2s ease-in-out left;
	animation-delay: 1s;
}

li.job {
	-webkit-animation: fade 2s ease-in-out forwards;
	-webkit-animation-delay: 2.5s;
	-moz-animation: fade 2s ease-in-out forwards;
	-moz-animation-delay: 2.5s;
	-o-animation: fade 2s ease-in-out forwards;
	-o-animation-delay: 2.5s;
	animation: fade 2s ease-in-out forwards;
	animation-delay: 2.5s;
}

li.location {
	-webkit-animation: fade 2s ease-in-out forwards;
	-webkit-animation-delay: 4s;
	-moz-animation: fade 2s ease-in-out forwards;
	-moz-animation-delay: 4s;
	-o-animation: fade 2s ease-in-out forwards;
	-o-animation-delay: 4s;
	animation: fade 2s ease-in-out forwards;
	animation-delay: 4s;
}

li.twitter {
	-webkit-animation: fade 2s ease-in-out forwards;
	-webkit-animation-delay: 5.5s;
	-moz-animation: fade 2s ease-in-out forwards;
	-moz-animation-delay: 5.5s;
	-o-animation: fade 2s ease-in-out forwards;
	-o-animation-delay: 5.5s;
	animation: fade 2s ease-in-out forwards;
	animation-delay: 5.5s;
}

li.github {
	-webkit-animation: fade 2s ease-in-out forwards;
	-webkit-animation-delay: 7s;
	-moz-animation: fade 2s ease-in-out forwards;
	-moz-animation-delay: 7s;
	-o-animation: fade 2s ease-in-out...