.tetrominos{position:absolute;top:50%;left:50%;transform:translate(-112px,-96px)}.tetromino{width:96px;height:112px;position:absolute;transition:.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="%23010101" 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') top center no-repeat}.box1{-webkit-animation:1.5s ease-out infinite tetromino1;animation:1.5s ease-out infinite tetromino1}.box2{-webkit-animation:1.5s ease-out infinite tetromino2;animation:1.5s ease-out infinite tetromino2}.box3{-webkit-animation:1.5s ease-out infinite tetromino3;animation:1.5s ease-out infinite tetromino3;z-index:2}.box4{-webkit-animation:1.5s ease-out infinite tetromino4;animation:1.5s ease-out infinite tetromino4}@-webkit-keyframes tetromino1{0%,40%{transform:translate(0,0)}50%{transform:translate(48px,-27px)}100%,60%{transform:translate(96px,0)}}@keyframes tetromino1{0%,40%{transform:translate(0,0)}50%{transform:translate(48px,-27px)}100%,60%{transform:translate(96px,0)}}@-webkit-keyframes tetromino2{0%,20%{transform:translate(96px,0)}100%,40%{transform:translate(144px,27px)}}@keyframes tetromino2{0%,20%{transform:translate(96px,0)}100%,40%{transform:translate(144px,27px)}}@-webkit-keyframes tetromino3{0%{transform:translate(144px,27px)}20%,60%{transform:translate(96px,54px)}100%,90%{transform:translate(48px,27px)}}@keyframes tetromino3{0%{transform:translate(144px,27px)}20%,60%{transform:translate(96px,54px)}100%,90%{transform:translate(48px,27px)}}@-webkit-keyframes tetromino4{0%,60%{transform:translate(48px,27px)}100%,90%{transform:translate(0,0)}}@keyframes tetromino4{0%,60%{transform:translate(48px,27px)}100%,90%{transform:translate(0,0)}}