<div class="so center">
  <div class="inner">
    <div class="stack-box">
      <div class="stack">
        <div class="item">
          <div class="inner-item"></div>
        </div>
        <div class="item">
          <div class="inner-item"></div>
        </div>
        <div class="item">
          <div class="inner-item"></div>
        </div>
        <div class="item">
          <div class="inner-item"></div>
        </div>
        <div class="item">
          <div class="inner-item"></div>
        </div>
      </div>
      <div class="box">
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
      </div>
    </div>
    <div class="name">
      stack<span class="b">overflow</span>
    </div>
  </div>
</div>

$box-color: #BCBBBB;
$stack-color: #F48024;
$main-background: #ffffff;

$stack-padding: 10px;

$box-size:  12px;
$box-width: 115px;
$box-height: $box-size * 3 + $stack-padding * 2;
$box-y: 100px;

$stack-height: $box-size;
$stack-arc-length: 100px;
$stack-arc-rotation: 12deg;
$stack-width: $box-width - 2*$box-size - 2*$stack-padding;

body{
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  overflow: hidden;
  background: #fff;
}

.center{
  margin: 80px auto;
}

.so{
  display: block;
  width: 500px;
  height: $box-y + $box-height;
  background: $main-background;

  .inner{
    width: 500px;
    height: $box-y + $box-height;
    position: absolute;

    *{
      position: absolute;
      animation-iteration-count: infinite;
      animation-duration: 3.5s;
    }

    .name{
      position: absolute;
      font-size: 54px;
      left: 130px;
      top: $box-y - 5px;

      .b{
        font-weight: bold;
      }
    }

    .stack-box{
      top: $box-y;
      width: $box-width;
      height: $box-height;
    }

    .box{
      width: $box-width;
      height: $box-height;
      left: 0px;

      div{
        background: $box-color;
      }

      .bottom{
        bottom: 0px;
        left: 0px;
        width: $box-width;
        height: $box-size;
      }

      .left{
        bottom: $box-size - 1px;
        left: 0px;
        width: $box-size;
        height: $box-height - $box-size * 2 + 2px;
      }

      .right{
        bottom: $box-size - 1px;
        left: $box-width - $box-size;
        width: $box-size;
        height: $box-height - $box-size * 2 + 2px;
      }

      .top{
        top: 0px;
        left: 0px;
        //width: $box-width;
        width: 0;
        height: $box-size;
      }
    }

    .stack{
      left: $box-size + $stack-padding;
      top: $box-height - $box-size - $stack-padding - $stack-height;

      .inner-item{
        background: $stack-color;

        width: $box-width - 2*$box-size - 2*$stack-padding;
        height: $stack-height;
      }

      .item{
        transition: transform 0.3s;
        width: $box-width - 2*$box-size - 2*$stack-padding + 220px;
      }
      
      @for $i from 0 through 4 {
        div:nth-child(#{$i+1}){
          transform: rotate(#{$i * $stack-arc-rotation}) ;
        }
      }
    }
  }

  .inner{
    $total-time: 2s;

    .box{
      animation-name: box;

      .top{
        animation-name: box-top;
      }

      .left{
        animation-name: box-left;
      }

      .right{
        animation-name: box-right;
      }

      .bottom{
        animation-name: box-bottom;
      }
    }

    .stack-box{
      animation-name: stack-box;
    }

    .stack{
      animation-name: stack;

      .inner-item{
        animation-name: stack-items;
      }
      
      @for $i from 1 through 5 {
        .item:nth-child(#{$i}){
          animation-name: stack-item-#{$i};
        }
      }
    }
  }

  $folded-padding: 30px;

  @keyframes stack{
    0%   { left: $box-size + $stack-padding; }
    15%   { left: $box-size + $stack-padding; }
    30%   { left: $box-size + $stack-padding + $folded-padding; }
    50%   { left: $box-size + $stack-padding + $folded-padding; }
    80%   { left: $box-size + $stack-padding; }
  }

  @for $i from 0 through 4 {
    @keyframes stack-item-#{$i+1} {
      0%   { transform: rotate($stack-arc-rotation * #{$i}); }
      10% { transform: rotate(0deg); }
      50% { transform: rotate(0deg); }
      54% { transform: rotate(0deg); }
      92%   { transform: rotate($stack-arc-rotation * #{$i}); }
    }
  }

  @keyframes stack-items{
    0%   { width: $stack-width;}
    15%   { width: $stack-width;}
    30%   { width: $stack-height;}
    50%   { width: $stack-height;}
    80%   { width: $stack-width;}
  }

  @keyframes box{
    0%   { left: 0; }
    15%   { left: 0; }
    30%   { left: $folded-padding; }
    50%   { left: $folded-padding; }
    80%   { left: 0; }
  }

  @keyframes box-top{
    0%   { width: 0; }
    6%   { width: 0; }
    15%   { width: $box-width; }
    30%   { width: $box-size * 2 + $stack-padding * 2 + $stack-height; }
    50%   { width: $box-size * 2 + $stack-padding * 2 + $stack-height; }
    59%   { width: 0; }
  }

  @keyframes box-left{
    15%   { }
    30%   { }
    40%   { }
    50%   { }
  }

  @keyframes box-bottom{
    0%   { width: $box-width; }
    15%   { width: $box-width; }
    30%   { width: $box-size * 2 + $stack-padding * 2 + $stack-height; }
    50%   { width: $box-size * 2 + $stack-padding * 2 + $stack-height; }
    80%   { width: $box-width; }
  }

  @keyframes box-right{
    15%   { left: $box-width - $box-size; }
    30%   { left: $box-size * 2 + $stack-padding * 2; }
    50%   { left: $box-size * 2 + $stack-padding * 2;  }
    80%   { left: $box-width - $box-size; }
  }

  @keyframes stack-box{
    0%   { transform: rotate(0deg); }
    30%   { transform: rotate(0deg); }
    40%   { transform: rotate(135deg); }
    50%   { transform: rotate(135deg); }
    83%   { transform: rotate(360deg); }
    100%   { transform: rotate(360deg); }
  }
}