Article Navigation Sample

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400);
 * {
margin: 0;
padding: 0;
border: 0;
 }
 
 html, body {
min-height: 100%;
 }
 
 body {
font-size: 15px;
font-family: 'Source Code Pro', sans-serif;
overflow-x: hidden;
 }
 
 nav {
white-space: nowrap;
 }
 
 article {
position: relative;
animation: slide-in .5s backwards;
 }
 article:nth-child(1) {
animation-delay: 0.2s;
 }
 article:nth-child(1) h2 {
background: #76f471;
color: #5cc059;
 }
 article:nth-child(2) {
animation-delay: 0.4s;
 }
 article:nth-child(2) h2 {
background: #71f485;
color: #59c068;
 }
 article:nth-child(3) {
animation-delay: 0.6s;
 }
 article:nth-child(3) h2 {
background: #71f49d;
color: #59c07b;
 }
 article:nth-child(4) {
animation-delay: 0.8s;
 }
 article:nth-child(4) h2 {
background: #71f4b5;
color: #59c08e;
 }
 article:nth-child(5) {
animation-delay: 1s;
 }
 article:nth-child(5) h2 {
background: #71f4cd;
color: #59c0a1;
 }
 article:nth-child(6) {
animation-delay: 1.2s;
 }
 article:nth-child(6) h2 {
background: #71f4e4;
color: #59c0b4;
 }
 article:nth-child(7) {
animation-delay: 1.4s;
 }
 article:nth-child(7) h2 {
background: #71ebf4;
color: #59b9c0;
 }
 article:nth-child(8) {
animation-delay: 1.6s;
 }
 article:nth-child(8) h2 {
background: #71d3f4;
color: #59a6c0;
 }
 article:nth-child(9) {
animation-delay: 1.8s;
 }
 article:nth-child(9) h2 {
background: #71bbf4;
color: #5993c0;
 }
 article h2 {
display: inline-block;
box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px, -5px 5px, -6px 6px, -7px 7px, -8px 8px, -9px 9px, -10px 10px;
font-weight: 300;
font-size: 1.5em;
text-transform: uppercase;
padding-left: 10%;
padding-right: 1em;
margin-left: -5px;
transition: .4s;
 }
 article h2 a {
padding: 1em 0;
display: inline-block;
color: #222222;
text-decoration: none;
 }
 article h2:hover {
box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px, -5px 5px, -6px 6px, -7px 7px, -8px 8px, -9px 9px, -10px 10px, -11px 11px, -12px 12px, -13px 13px, -14px 14px, -15px 15px;
transform: translate3d(5px, -5px, 0);
transition: .15s;
 }
 article h2:active {
box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px, -5px 5px, -6px 6px, -7px 7px, -8px 8px, -9px 9px, -10px 10px;
transform: translate3d(0px, 0px, 0);
transition: .15s;
 }
 article h3 {
display: inline-block;
color: #555555;
font-style: italic;
font-size: 0.8em;
margin-left: 15px;
 }
 article h3 .category {
border: 2px solid #555;
padding: 5px;
border-radius: 15px;
 }
 
 @keyframes slide-in {
from {
transform: translate3d(-100%, 0, 0);
}
 }