Deconstructing Square

html, body { background: #222; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .square { display: inline; font-size: 6rem; } .square .square_cell { background: #ff7473; } .square_cell { background: #fff; width: .333333333em; height: .333333333em; float: left; animation-name: spinnerScale; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .square_cell:nth-child(3n+1) { clear: both; } .square_cell:nth-child(1) { animation-delay: 0.2s; } .square_cell:nth-child(2) { animation-delay: 0.3s; } .square_cell:nth-child(3) { animation-delay: 0.4s; } .square_cell:nth-chlid(4) { animation-delay: 0.1s; } .square_cell:nth-child(5) { animation-delay: 0.2s; } .square_cell:nth-child(6) { animation-delay: 0.3s; } .square_cell:nth-child(7) { animation-delay: 0s; } .square_cell:nth-child(8) { animation-delay: 0.1s; } .square_cell { animation-delay: 0.2s; } @keyframes spinnerScale { 0%, 70%, 100% { transform: scale3D(1,1,1); } 35% { transform: scale3D(0,0,1); } }