agregar tiempo de demora en la animación de css3

Question

Acabo de establecer una animación en un div y tuvo éxito. ¡Ahora quiero probarlo porque su retraso es demasiado corto! así que ¿cómo puedo añadir el tiempo de retraso entre la animación (0% a 25%) y la animación (25% a 50%) Aquí está el código:

#flow{ 
     position:absolute; 
     -webkit-animation:mymove 10s ease-in-out; 
     -webkit-animation-iteration-count:3; 
     -webkit-animation-delay:1s; 
    } 

@-webkit-keyframes mymove 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

---

todo el mundo Gracias por su atención! ¡He encontrado la respuesta pero no conozco la Api de la definición de porcentaje en fotogramas clave! Y si sabes algo de eso, solo échame una mano, ¡muchas gracias!

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    26%{left:127px;} 
    27%{left:127px;} 
    28%{left:127px;} 
    29%{left:127px;} 
    30%{left:127px;} 
    31%{left:127px;} 
    32%{left:127px;} 
    33%{left:127px;} 
    34%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

Answer 1

No creo que pueda retrasar las partes individuales de una animación. Lo que podrías hacer es usar dos animaciones y comenzarlas con un retraso.

#flow{ 
     position:absolute; 
     -webkit-animation: 
      mymove_first 10s 0s 10 ease-in-out, 
      mymove_second 10s 2s 10 ease-in-out; 
    } 

@-webkit-keyframes mymove_first 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
    } 

@-webkit-keyframes mymove_second 
    { 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

Answer 2

me encontré con este problema, por lo que yo puedo encontrar, sin jQuery no se puede retrasar los marcos.

Puede retrasar el inicio de la animación. También puede hacer que la animación termine en el mismo estado que el fotograma original.

La media que yo uso, es ser capaz de hacer múltiples animaciones, por ejemplo:

Su div:

<div id="bannerImg" class="banner-RunAnimation"></div> 

Ejecutar la animación

.RunAnimation { 
         -webkit-animation: animation1 3s 0s 1 ease-in-out, 
         animation2 5s 5s 1 ease-out forwards; 
      } 

Animaciones:

@-webkit-keyframes animation1 { 
0% {-webkit-transform: translateY(-0px);} 
50% {-webkit-transform: translateY(-150px);} 
100% {-webkit-transform: translateY(-150px); 
     opacity:0;} 
}  

@-webkit-keyframes animation2 { 
0% {transform: translateY(-0px);} 
100% {transform: translateY(-150px);} 
}  

Por d elaying las animaciones y el uso de la opacidad, se puede hacer qutie algunas cosas, si esto no ayuda a mirar en jQuery

Answer 3

Puede hacer una pausa jugando con los porcentajes (siguiendo el ejemplo):

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

se no necesita poner todos los porcentajes entre el 25% y el 35%, el navegador los está ignorando. pasas de 0 a 25% del píxel 5 a 127, si tu animación es de 10 segundos, tardará 2.5 segundos en hacerlo, luego pausas 1 segundo entre 25% a 35% ya que es el mismo píxel que no moverá y luego continuarás la próxima animación al píxel 249, tomará 1.5 segundos y así sucesivamente ...

Espero que esto ayude!