Pausa entre animaciones de fotogramas clave

Question

obtuvo una animación simple con fotogramas clave.

@-webkit-keyframes rotation { 
    0% { -webkit-transform: rotate(10deg); } 
    25% { -webkit-transform: rotate(5deg); } 
    50% { -webkit-transform: rotate(10deg); } 
    75% { -webkit-transform: rotate(5deg); } 
    100% { -webkit-transform: rotate(10deg); } 

} 

y

.class { -webkit-animation: rotation 1s infinite; } 

¿Es posible añadir una pausa entre esta animación de fotogramas clave? Me gusta 5 segundos? Sé que hay un -webkit-animation-delay pero esto retrasa solo el comienzo de la animación.

P.S. Sé que es solo el prefijo webkit ... al final lo obtengo a través del prefijo.

Answer 1

consiguió una solución, pero parece poco sucio

@-webkit-keyframes rotation { 
     0% { -webkit-transform: rotate(10deg); } 
     5% { -webkit-transform: rotate(5deg); } 
     10% { -webkit-transform: rotate(10deg); } 
     15% { -webkit-transform: rotate(5deg); } 
     20% { -webkit-transform: rotate(10deg); } 
     100% { -webkit-transform: rotate(10deg); } 

    } 
.class { -webkit-animation: rotation 5s infinite; } 

Answer 2

Después de luchar con este problema a mí mismo y la ayuda de Denny Mueller He descubierto que la clave es que parar antes de 100%.

Puede usar la demora para comenzar con un retraso y después de la primera iteración, la demora será la cantidad de tiempo que queda después de que finalice la animación.

Aquí es lo que he utilizado para mi aplicación:

@-webkit-keyframes spincube { 
    from,to  {             } 
    8%,14%  { -webkit-transform: rotateY(-90deg);    } 
    24%,30%  { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 
    40%,46%  { -webkit-transform: rotateY(180deg) rotateZ(90deg); } 
    56%,62%  { -webkit-transform: rotateY(90deg) rotateX(90deg); } 
    72%,78%  { -webkit-transform: rotateX(90deg);     } 
    88%,94%  { -webkit-transform: rotateX(0deg);     } 
} 

Como se puede ver, me paro en el 94% y el 6% restante se utiliza para hacer una pausa en el primer fotograma.