:root {
  --tetromino-width: 96px;
  --tetromino-height: 112px;
  --tetromino-xspace: 48px; /* width / 2 */
  --tetromino-yspace: 27px; /* (height / 4) - 1 */
  --tetromino-speed: 1.5s;
}

.tetrominos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-1 * var(--tetromino-height)), calc(-1 * var(--tetromino-width)));
}

.tetromino {
  width: var(--tetromino-width);
  height: var(--tetromino-height);
  position: absolute;
  transition: all ease .3s;
  background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%231B2123" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

.box1 {
  animation: tetromino1 var(--tetromino-speed) ease-out infinite;
}

.box2 {
  animation: tetromino2 var(--tetromino-speed) ease-out infinite;
}

.box3 {
  animation: tetromino3 var(--tetromino-speed) ease-out infinite;
  z-index: 2;
}

.box4 {
  animation: tetromino4 var(--tetromino-speed) ease-out infinite;
}

@keyframes tetromino1 {
  0%, 40% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--tetromino-xspace), calc(-1 * var(--tetromino-yspace)));
  }
  60%, 100% {
    transform: translate(calc(var(--tetromino-xspace) * 2), 0);
  }
}

@keyframes tetromino2 {
  0%, 20% {
    transform: translate(calc(var(--tetromino-xspace) * 2), 0px);
  }
  40%, 100% {
    transform: translate(calc(var(--tetromino-xspace) * 3), var(--tetromino-yspace));
  }
}

@keyframes tetromino3 {
  0% {
    transform: translate(calc(var(--tetromino-xspace) * 3), var(--tetromino-yspace));
  }
  20%, 60% {
    transform: translate(calc(var(--tetromino-xspace) * 2), calc(var(--tetromino-yspace) * 2));
  }
  90%, 100% {
    transform: translate(var(--tetromino-xspace), var(--tetromino-yspace));
  }
}

@keyframes tetromino4 {
  0%, 60% {
    transform: translate(var(--tetromino-xspace), var(--tetromino-yspace));
  }
  90%, 100% {
    transform: translate(0, 0);
  }
}