<div class="stack"></div>

body {
  margin:0;
  height:100vh;
  background:#444;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.stack {
  width:200px;
  height:200px;
  display:inherit;
  background:
    linear-gradient(#bdbcbc 0 0) 75.3% 73.4%/6.5% 20%,
    linear-gradient(#bdbcbc 0 0) 20.2% 73.4%/6.5% 20%,
    linear-gradient(#bdbcbc 0 0) 45% 83.5%/58% 6.5%,
    linear-gradient(#f4811e 0 0) 46.8% 69.6%/32.4% 6.5%;
  background-repeat:no-repeat;
}
.stack:before,
.stack:after{
  content:"";
  grid-area:1/1;
  background:#f4811e;
  transform-origin: 100% 55%;
}
.stack::before {
   animation:b 1s infinite alternate;
}
.stack::after {
   animation:a 1s infinite alternate;
}

@keyframes b{
  0%,23%{
    transform:translate(0%, -19.5%) rotate(0deg);
     clip-path: polygon(31.6% 65.1%, 31.6% 71.8%, 64% 71.8%, 64% 65.1%, 64% 65.1%, 64% 58.4%, 31.6% 58.4%, 31.6% 65.1%, 64% 65.1%, 64% 65.1%);
  }
  80%,100% {
     transform: translate(8%, 4%) rotate(40deg);
    clip-path: polygon(31.6% 65.1%, 31.6% 71.8%, 64% 71.8%, 64% 65.1%, 64% 63.6%, 65.3% 57.2%, 33.7% 50.6%, 32.3% 57%, 64% 63.6%, 64% 65.1%);
  }
}

@keyframes a{
  0%,30%{
    transform:translate(0%, -6.6%) rotate(0deg);
     clip-path: polygon(31.6% 65.1%, 31.6% 71.8%, 64% 71.8%, 64% 65.1%, 64% 65.1%, 64% 58.4%, 31.6% 58.4%, 31.6% 65.1%, 64% 65.1%, 64% 65.1%);
  }
  80%,100% {
     transform:translate(3%, 0%) rotate(12deg);
    clip-path: polygon(31.6% 65.1%, 31.6% 71.8%, 64% 71.8%, 64% 65.1%, 64% 63.6%, 65.3% 57.2%, 33.7% 50.6%, 32.3% 57%, 64% 63.6%, 64% 65.1%);
  }
}