Pregunta animando elementos secuencialmente en css3 puro en bucle


Intento animar en elementos secuencialmente en animaciones css3 completas. Parece que la respuesta muy directa es usar el retraso de la animación. Sin embargo, quería este ciclo, ¿alguna idea de cómo hacer que la animación se repita infinitamente?

encontré esto violín en una pregunta similar. Básicamente, esa es la misma lógica, pero solo quería que se enrollara.

Esta fue la [pregunta] similar (https://stackoverflow.com/a/8294491/340888)

Estaba usando esto:

@-webkit-keyframes FadeIn { 
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

Editar

Para que quede claro, quiero la animación de forma secuencial, por ejemplo, después de que la primera se anima, anima el 2º elemento, luego la 3ª ... y así sucesivamente. Estoy pensando en animar alrededor de 10 a 12 elementos. Entonces animarán uno tras otro.

Entonces, la respuesta de @Sonu Joshi es incorrecta.


8
2018-04-26 07:53


origen


Respuestas:


Debes hacer la animación lo suficiente para que todos los elementos tengan la oportunidad de animarse antes de que el ciclo comience nuevamente.

En este ejemplo, su 4º elemento solo comienza a animarse después de 2 segundos. La transición en sí va a tomar otro segundo, y luego es posible que desee un poco de pausa, digamos otro segundo, antes de reanimar el primer elemento. Entonces son 4 segundos en total.

Entonces, quizás quieras algo como esto: -webkit-animation: Fadein 4s infinite linear.

Pero también necesitará ajustar los porcentajes del fotograma clave, dividiendo cada uno de ellos por 4, ya que aún desea que la transición en sí tome solo 1 segundo.

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% {-webkit-transform:scale(1); }
}

Ejemplo de Fiddle


6
2018-04-30 01:47



Bastante simple. Utilizar -webkit-animation: FadeIn 1s infinite linear;

Manifestación


-2
2018-04-26 07:56



Preguntas populares