@keyframes loading { 0% { transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg); opacity: 1; } 33% { transform: scale(1.2) rotateZ(120deg); transform: scale(1.2) rotateZ(120deg); transform: scale(1.2) rotateZ(120deg); transform: scale(1.2) rotateZ(120deg); opacity: .2; } 67% { transform: scale(0.7) rotateZ(240deg); transform: scale(0.7) rotateZ(240deg); transform: scale(0.7) rotateZ(240deg); transform: scale(0.7) rotateZ(240deg); opacity: .6; } 100% { transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg); opacity: 1; } } .loader { overflow: hidden; font-size: 450px; } .loader span { animation: loading 1s linear infinite -0.7s; display:inline-block; } .loader .span2 { animation: loading 1s linear infinite -0.2s; } .loader .span3 { animation: loading 1s linear infinite -0.5s; } .loader .span4 { animation: loading 1s linear infinite -1.2s; } .loader .span5 { animation: loading 1s linear infinite -0.36s; } .loader .span6 { animation: loading 1s linear infinite -0.65s; } .loader .span7 { animation: loading 1s linear infinite -0.93s; }