Animación CSS de fotogramas clave con retardo entre iteraciones | Programar Plus

0

Supongamos que desea que una animación se ejecute durante 1 segundo, pero luego espere 4 segundos antes de volver a ejecutarse. Parece que sería fácil. Resulta que no es tan sencillo, pero es factible. Tienes que fingirlo.

no

Hay un animation-delay propiedad, pero eso no nos ayudará aquí. Eso retrasa el inicio de la animación, pero una vez iniciada, se ejecuta de forma continua.

Solución: fotogramas clave sin cambios

Necesitarás hacer un poco de matemática mental:

Quiero que la animación se ejecute durante 1 segundo.

~ más ~

Quiero que la animación se retrase 4 segundos entre iteraciones.

~ es igual a ~

5 segundos en total

Entonces, cuando llamas a la animación de fotogramas clave, usas el total de segundos:

.mover {
  animation: move 5s infinite;
}

Pero ahora nuestros @keyframes se ejecutarán durante 5 segundos:

@keyframes move {
  /* this will happen over 5 seconds */
}

Entonces, para que nuestra animación se ejecute solo durante 1 segundo, necesitará que los cambios ocurran en 1/5 del tiempo, o el 20%. Verbously, se vería así:

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  /* Finish changes by here */
  20% {
    transform: translate(200px, 0);
  }

  /* Between 20% and 100%, nothing changes */
  100% {
    transform: translate(200px, 0);
  }
}

Podemos escribir con menos código, ya que se asumen los valores del 0% y puede separar los pasos de los fotogramas clave con comas:

@keyframes move {
  20%, 100% {
    transform: translate(200px, 0);
  }
}

Puede obtener todo lo elegante que desee con los fotogramas clave, solo debe recordar tener todo configurado exactamente igual entre el paso final de su animación y el 100%.

Manifestación

Vea el fotograma clave de lápiz con retardo de animación entre iteraciones de Chris Coyier (@chriscoyier) en CodePen.

(Visited 9 times, 1 visits today)