On <div id="cube"> <span class="stellar"> <p>Spinner</p> </span> </div>

/* Firefox > lab > _wblz ** Animation Rotate Delay > no-webkit prefix ** but w.k! */ html, body { position: relative; height: 100%; } body, webbeloz { display: -webkit-flex; display: flex; margin: 0 1%; font-size: 100%; justify-content: space-around; } #cube { align-self: center; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 60% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } #cube span.stellar { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 2000ms; } #cube span.stellar { width: 101px; height: 101px; display: block; background: red; border: 10px solid #dedede; text-align:center; } .stellar p { vertical-align: middle; line-height: 70px; transform: rotate(-45deg); color: white; }