<!-- first arrow -->
<div class="firstarrow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- second arrow -->
<div class="secondarrow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- third arrow -->
<div class="thirdarrow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

$bgcol:#FFF;
$featcol:rgba(106,102,118,1);
$seccol:rgba(224,195,160,1);
$thirdcol:rgba(190,157,140,1);

$skewY:(-45deg);
$skewX:(45deg);
$arskew:(90deg);

body{
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  display:block;
  width:400px;
  background:$bgcol;
}

// set style for all arrows
div > div{
  width:20px;
  height:20px;
  position:absolute;
}
//==================================
//      style for first arrow
//==================================
div.firstarrow div{
  background:$featcol;
    &:nth-child(1){
      -webkit-animation:firstarrow-arm1-height 1s normal forwards;
      -webkit-transform:skewY($skewY);
    }
    &:nth-child(2){
      -webkit-animation:firstarrow-arm2-length 1s normal forwards;
      -webkit-animation-delay:0.5s;
      -webkit-transform:translateY(230px);
      visibility:hidden;
    }
    &:nth-child(3){
      -webkit-transform:translate(80px, 230px);
      -webkit-animation:firstarrow-arm3-height 1s normal forwards;
      -webkit-animation-delay:1.3s;
      visibility:hidden;
    }
    &:nth-child(4){
      -webkit-transform:rotate(225deg);
      visibility:hidden;
      -webkit-animation:firstarrow-toparrow-left 1s normal forwards;
      -webkit-animation-delay:2.2s;
    }
    &:nth-child(5){
      -webkit-transform:rotate(135deg);
      visibility:hidden;
      -webkit-animation:firstarrow-toparrow-right 1s normal forwards;
      -webkit-animation-delay:2.2s;
    }
}
@-webkit-keyframes firstarrow-arm1-height{
  0% {height:20px;-webkit-transform:skewY($skewY);}
  50% {height:240px;-webkit-transform:translateY(0px)skewY($skewY);border-radius:0 0 0 0px;}
  100%{height:60px;-webkit-transform:translateY(190px)skewY($skewY);border-radius:0 0 0 50px;}
}
@-webkit-keyframes firstarrow-arm2-length{
  0% {visibility:visible;width:0px;}
  100%{visibility:visible;width:100px;}
}
@-webkit-keyframes firstarrow-arm3-height{
  0% {visibility:visible;height:20px;}
  /*50%{transform:translate(80px, 200px);}*/
  100%{visibility:visible;height:210px;-webkit-transform:translate(80px, 30px);}
}
@-webkit-keyframes firstarrow-toparrow-left{
  0%{visibility:visible;height:0px;-webkit-transform:translate(80px, 34px)rotate(225deg)skewY(45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(52px, 14px)rotate(225deg)skewY(45deg);}
}
@-webkit-keyframes firstarrow-toparrow-right{
  0%{visibility:visible;height:0px;-webkit-transform:translate(80px, 34px)rotate(135deg)skewY(-45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(108px, 14px)rotate(135deg)skewY(-45deg);}
}

//==================================
//      style for second arrow
//==================================
div.secondarrow div{
  background:$seccol;
    &:nth-child(1){
      -webkit-animation: secondarrow-arm1-height 1s normal forwards;
      -webkit-animation-delay:.3s;
      -webkit-transform:skewY($skewY);
      visibility:hidden;
    }
  &:nth-child(2){
      -webkit-animation:secondarrow-arm2-length 1s normal forwards;
      -webkit-animation-delay:.8s;
      -webkit-transform:translateX(20px)translateY(210px);
      visibility:hidden;
  }
    &:nth-child(3){
      -webkit-transform:translate(60px, 210px);
      /*background:#F00;*/
      -webkit-animation:secondarrow-arm3-height 1s normal forwards;
      -webkit-animation-delay:1.6s;
      visibility:hidden;
    }
    &:nth-child(4){
      -webkit-transform:rotate(225deg);
      visibility:hidden;
      -webkit-animation:secondarrow-toparrow-left 1s normal forwards;
      -webkit-animation-delay:2.4s;
    }
    &:nth-child(5){
      -webkit-transform:rotate(135deg);
      visibility:hidden;
      -webkit-animation:secondarrow-toparrow-right 1s normal forwards;
      -webkit-animation-delay:2.4s;
    }
}
@-webkit-keyframes secondarrow-arm1-height{
  0% {visibility:visible;height:20px;-webkit-transform:translateX(20px)skewY($skewY);}
  50% {height:220px;-webkit-transform:translateX(20px)skewY($skewY);}
  100%{visibility:visible;height:50px;-webkit-transform:translateX(20px)translateY(170px)skewY($skewY);}
}
@-webkit-keyframes secondarrow-arm2-length{
  0% {visibility:visible;width:0px;}
  100%{visibility:visible;width:60px;}
}
@-webkit-keyframes secondarrow-arm3-height{
  0% {visibility:visible;height:20px;}
  100%{visibility:visible;height:130px;-webkit-transform:translate(60px, 80px);}
}
@-webkit-keyframes secondarrow-toparrow-left{
  0%{visibility:visible;height:0px;-webkit-transform:translate(60px, 80px)rotate(225deg)skewY(45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(32px, 63px)rotate(225deg)skewY(45deg);}
}
@-webkit-keyframes secondarrow-toparrow-right{
  0%{visibility:visible;height:0px;-webkit-transform:translate(60px, 77px)rotate(135deg)skewY(-45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(88px, 63px)rotate(135deg)skewY(-45deg);}
}

//==================================
//      style for third arrow
//==================================
div.thirdarrow div{
  background:$thirdcol;
    &:nth-child(1){
      -webkit-animation: thirdarrow-arm1-height 1s normal forwards;
      -webkit-animation-delay:.2s;
      -webkit-transform:skewY($skewY);
      visibility:hidden;
    }
  &:nth-child(2){
      -webkit-animation:thirdarrow-arm2-length 1s forwards;
      -webkit-animation-delay:.6s;
      -webkit-transform:translateX(-20px)translateY(250px);
      visibility:hidden;
  }
    &:nth-child(3){
      -webkit-transform:translate(52px, 102px)rotate(225deg);
      visibility:hidden;
      -webkit-animation:thirdarrow-toparrow-left 1s normal forwards;
      -webkit-animation-delay:2.6s;
      z-index:-999;
    }
    &:nth-child(4){
      -webkit-transform:translate(80px, 120px)rotate(135deg);
      visibility:hidden;
      -webkit-animation:thirdarrow-toparrow-right 1s normal forwards;
      -webkit-animation-delay:2.6s;
      z-index:-99;
    }
}
@-webkit-keyframes thirdarrow-arm1-height{
  0% {visibility:visible;height:20px;-webkit-transform:translateX(-20px)skewY($skewY);}
  50% {height:260px;-webkit-transform:translateX(-20px)skewY($skewY);}
  100%{visibility:visible;height:50px;-webkit-transform:translateX(-20px)translateY(210px)skewY($skewY);}
}
@-webkit-keyframes thirdarrow-arm2-length{
  0% {visibility:visible;width:0px;}
  100%{visibility:visible;width:120px;}
}
@-webkit-keyframes thirdarrow-toparrow-left{
  0%{visibility:visible;height:20px;-webkit-transform:translate(80px, 121px)rotate(225deg)skewY(45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(52px, 112px)rotate(225deg)skewY(45deg);}
}
@-webkit-keyframes thirdarrow-toparrow-right{
  0%{visibility:visible;height:20px;-webkit-transform:translate(80px, 121px)rotate(135deg)skewY(-45deg);}
  100%{visibility:visible;height:80px;-webkit-transform:translate(108px,112px)rotate(135deg)skewY(-45deg);}
}