Cómo agregar un retraso entre ciclos de animación css Desarrollo HTML

Estoy girando un infinito circular

en 360 grados usando la animación css. Después de cada rotación, quiero detener o retrasar 5 segundos antes de la próxima rotación. ¿Cómo puedo lograrlo?

Aquí hay un ejemplo en vivo

El código es el siguiente.

CSS

 .circle{ position: absolute; top: 4; right: 4; height: 21px; width: 21px; border-radius: 50%; background: #00B5F9; color: white; font-family: varela round; font-size: 11; font-weight: 500; border: 1px solid white; -webkit-animation-name: lol; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s } @-webkit-keyframes lol { 0% { -webkit-transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg) } }

HTML

Puedes hacer algo como esto.

 0% { -webkit-transform:rotate(0deg) } 20% { -webkit-transform:rotate(360deg) } 100% { -webkit-transform:rotate(360deg) }

y cambiar la duración de la rotación.

 -webkit-animation-duration: 6s;

Entonces, lo que estás haciendo es configurar la animación para que tome 6’s pero mover la rotación para que sea más rápida (20% no es correcto para la espera de 5, pero puedes resolverlo). Entonces, la rotación se produce y luego se sitúa en 360 grados durante el rest del tiempo.

Demo aquí