Estoy tratando de replicar un indicador de actividad al estilo de Apple (icono de carga del reloj de sol) usando una animación PNG y CSS3. Tengo la imagen girando y haciéndolo continuamente, pero parece haber un retraso después de que la animación ha terminado antes de que haga la siguiente rotación.
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
He intentado cambiar la duración de la animación, pero no hace ninguna diferencia, si la ralentizas, digamos 5 s, es más evidente que después de la primera rotación hay una pausa antes de que vuelva a girar. Es esta pausa de la que quiero deshacerme.
Cualquier ayuda es muy apreciada, gracias.