$w: 24px;
$xspace: $w/2;
$yspace: 7px;
$speed: 1.5s;

.tetrominos {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-$xspace, -$yspace)
}

.tetromino {
  width: $w;
  position: absolute;
  transition: all ease .3s;
}

@keyframes tetromino1 {
  0% { 
    /* compose logo */
    transform: translate(0,0);
  } 20% { 
    /* 1 on 3 */
    transform: translate(0,0);
  } 40% { 
    /* L-shape */
    transform: translate(0,0);
  } 50% {
    /* pre-box */
    transform: translate($xspace,-$yspace);
  } 60% {
    /* box */
    transform: translate($xspace*2,0);
  } 90%, 100% { 
    /* compose logo */
    transform: translate($xspace*2,0);
  }
}

@keyframes tetromino2 {
  0% { 
    /* compose logo */
    transform: translate($xspace*2, 0px);
  } 20% { 
    /* 1 on 3 */
    transform: translate($xspace*2, 0px);
  } 40% { 
    /* L-shape */
    transform: translate($xspace*3, $yspace);
  } 60% { 
    /* box */
    transform: translate($xspace*3, $yspace);
  } 90%, 100% { 
    /* compose logo */
    transform: translate($xspace*3, $yspace);
  }
}

@keyframes tetromino3 {
  0% { 
    /* compose logo */
    transform: translate($xspace*3, $yspace);
  } 20% { 
    /* 1 on 3 */
    transform: translate($xspace*2, $yspace*2);
  } 40% { 
    /* L-shape */
    transform: translate($xspace*2, $yspace*2);
  } 60% { 
    /* box */
    transform: translate($xspace*2, $yspace*2);
  } 90%, 100% { 
    /* compose logo */
    transform: translate($xspace, $yspace);
  }
}

@keyframes tetromino4 {
  0% {
    /* compose logo */
    transform: translate($xspace, $yspace);
  } 20% { 
    /* 1 on 3 */
    transform: translate($xspace, $yspace);
  } 40% { 
    /* L-shape */
    transform: translate($xspace, $yspace);
  } 60% {
    /* box */
    transform: translate($xspace, $yspace);
  } 90%, 100% { 
    /* compose logo */
    transform: translate(0, 0);
  }
}

.tetromino {
  background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684.5"%3E%3Cpath fill="#010101" d="M305.7 0L0 171.2v342.3l305.7 171 306.3-171V171.2z"/%3E%3Cpath fill="#fff" d="M305.7 80.3l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat left center;
  background-size: 24px auto;
  width: 24px;
  height: 26px;
}

.box1 {
  animation: tetromino1 $speed ease-out infinite;
}
.box2 {
  animation: tetromino2 $speed ease-out infinite;
}
.box3 {
  animation: tetromino3 $speed ease-out infinite;
  z-index: 2;
}
.box4 {
  animation: tetromino4 $speed ease-out infinite;
}