HAML
.stage
<img class="infantry" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/polearms.png">
<img class="archers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/archers.png">
<img class="arrows" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsRelease.gif">
<img class="arrowsSM" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsSmall.gif">
<img class="arrowsLG" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsLG.png">
<img class="title" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/henry.gif">
SCSS
/* Compass library */
@import "compass";
body {
background: #fbfbfb;
}
.stage {
background: #c48e3f;
width: 600px;
height: 800px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.infantry, .archers, .arrows, .arrowsSM, .arrowsLG, .title {
position: absolute;
}
.infantry {
z-index: 1;
@include translate3d(0,500px,0);
animation: infantry 2.25s forwards;
}
.archers {
z-index: 3;
@include translate3d(0,565px,0);
animation: archers 2s 1.25s forwards;
}
.arrows {
z-index: 2;
@include translate3d(-1000px,800px,0);
animation: arrows .75s 2.5s forwards;
}
.arrowsSM {
z-index: 4;
@include translate3d(0,-1290px,0);
animation: arrowsSM .75s 3.5s forwards;
}
.arrowsLG {
z-index: 5;
@include translate3d(0,-1620px,0);
animation: arrowsLG .5s 3.75s forwards;
}
.title {
z-index: 5;
animation: title 1.75s 4s forwards;
opacity: 0;
}
/* Lets start some animation */
@keyframes infantry {
50% {@include translate3d(0,0,0);}
99% {@include translate3d(0,0,0);}
}
@keyframes archers {
50% {@include translate3d(0,0,0);}
75% {@include translate3d(0,0,0);}
}
@keyframes arrows {
to {@include translate3d(230px,-390px,0);}
}
@keyframes arrowsSM {
to {@include translate3d(0,800px,0);}
}
@keyframes arrowsLG {
to {@include translate3d(0,0,0);}
}
@keyframes title {
to {opacity: 1;}
}
