cómo hacer una animación en bucle esperar utilizando CSS3

Question

Tengo una animación CSS3 con lo siguiente:

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.animated { 
-webkit-animation-name: rotate; 
-webkit-animation-duration: 2.4s; 
-webkit-animation-iteration-count: infinite; 
-webkit-transition-timing-function: ease-in-out; 
} 

Funciona perfectamente, bueno ..., quiero hacerla esperar entre los bucles:
animación en marcha, animación acabado, de espera (aproximadamente 0,5 segundos), animación Enviar, extremo animación, de espera (aproximadamente 0,5 segundos) ...

PD: He intentado -webkit-animation-delay, no funciona.

¿Algún ayuda?

Answer 1

Agregue 0.5 segundos a la duración de su animación, luego cree un marco adicional en su keyframes que no cambie la cantidad de rotación;

@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    } 
    83% { /*2.4/2.9 = 0.827*/ 
    -webkit-transform: rotate(360deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 
.animated { 
... 
-webkit-animation-duration: 2.9s; /*note the increase*/ 
... 
} 

Pequeña demostración: little link.

Answer 2

Desactivar la clase css en el elemento por un tiempo especificado por javascript podría resolver su problema.

function delayAnimation() { 
    var animatedEl = document.getElementById('whatever'); 
    animatedEl.className = ''; 
    setTimeout(function() { 
     animatedEl.className = 'animated' 
     setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration 
    }, 500)// wait 0.5s 
} 

Espero que esto ayude.

Editar: He actualizado esta respuesta para reparar el código. Puede ver un ejemplo completamente funcional en jsfiddle. Gracias a @Fabrice para señalar que el código no funcionaba.

Answer 3

Puede usar una transición. Por ejemplo:

transition: all 0.6s ease-in-out; 

donde transition-delay:0.6s;