Una nueva forma de retrasar las animaciones de fotogramas clave

Si alguna vez quisiste agregar una pausa entre cada iteración de tu @keyframesanimación CSS, probablemente te hayas sentido frustrado al descubrir que no existe una forma integrada de hacerlo en CSS. Claro, podemos retrasar el inicio de un conjunto de @keyframeswith animation-delay, pero no hay forma de agregar tiempo entre la primera iteración de los fotogramas clave y cada ejecución posterior.

Esto surgió cuando quise adaptar esta animación de estrellas fugaces para usarla como fondo del banner de la página de inicio en un portal de empleados con temática espacial. Quería usar menos estrellas para reducir la distracción del contenido principal, evitar que las CPU se derritieran y que las estrellas fugaces siguieran pareciendo aleatorias.

Sin pausas

Por el bien de las comparaciones.

El método de retraso "original"

Aquí hay un ejemplo de dónde apliqué la técnica tradicional de retardo de fotogramas clave a mi bifurcación de las estrellas fugaces.

Este enfoque implica determinar cuánto tiempo queremos que sea el retraso entre iteraciones y luego comprimir los fotogramas clave a una fracción del 100%. Luego, mantenemos el estado final de la animación hasta llegar al 100% para lograr la pausa.

@keyframes my-animation {  /* Animation happens between 0% and 50% */  0% {    width: 0;  }  15% {    width: 100px;  }  /* Animation is paused/delayed between 50% and 100% */  50%, 100% {    width: 0;  }}

Experimenté el principal inconveniente de este enfoque: cada fotograma clave debe modificarse manualmente, lo cual es levemente doloroso y ciertamente propenso a errores. También es más difícil entender qué está haciendo la animación si requiere transponer mentalmente todos los fotogramas clave hasta el 100%.

Nueva técnica: esconderse durante el retraso.

Otra técnica es crear un nuevo conjunto @keyframesque se encargue de ocultar la animación durante el retraso. Luego, aplícalo con la animación original, al mismo tiempo.

.target-of-animation {  animation: my-awesome-beboop 1s, pause-between-iterations 4s;}@keyframes my-awesome-beboop {  ...}@keyframes pause-between-iterations {  /* Other animation is visible for 25% of the time */  0% {    opacity: 1;  }  25% {    opacity: 1;  }  /* Other animation is hidden for 75% of the time */  25.1% {    opacity: 0;  }  100% {    opacity: 0;  }}

Una limitación de esta técnica es que la pausa entre animaciones debe ser un múltiplo entero de los fotogramas clave "pausados". Esto se debe a que los fotogramas clave que se repiten infinitamente se ejecutarán nuevamente inmediatamente, incluso si se aplican fotogramas clave de mayor duración al mismo elemento.

Interesante aparte: cuando comencé este artículo, pensé erróneamente que una función de aceleración se aplica al 0% y termina en el 100%. Resulta que la función de aceleración se aplica a cada propiedad CSS, comenzando en el primer fotograma clave donde hay un valor. definido y termina en el siguiente fotograma clave donde se define un valor (por ejemplo, se aplicaría una curva de relajación del 25% al ​​75%, si los fotogramas clave fueran 25% { left: 0 } 75% { left: 50px}). En retrospectiva, esto tiene mucho sentido porque sería difícil ajustar la animación si fuera un subconjunto de la curva de relajación total, pero estoy un poco alucinado.

En el my-awesome-beboopejemplo de fotogramas clave anterior, my-awesome-beboopse ejecutará tres veces detrás de escena durante los pause-between-animationsfotogramas clave antes de revelarse para lo que parece ser su segundo bucle para el usuario (que en realidad es la quinta vez que se ejecuta).

Aquí hay un ejemplo que usa esto para agregar un retraso entre las estrellas fugaces:

¿No puedes ocultar tu animación durante el retraso?

Si necesita mantener su animación en la pantalla durante el retraso, existe otra opción además de ocultarla. Aún puedes usar un segundo conjunto de @keyframes, pero animar una propiedad CSS de una manera que contrarreste o anule el movimiento de la animación principal. Por ejemplo, si su animación principal usa translateX, puede animar lefto margin-leften su conjunto de retardo @keyframes.

Aquí hay un par de ejemplos:

Pausa cambiando transform-origin:

Pausa contrarrestando transform: translateXanimando la leftpropiedad:

En el caso de pausar la translateXanimación, necesitarás ser más sofisticado @keyframessi necesitas pausar la animación por más de una sola iteración:

/* pausing the animation for three iterations */@keyframes slide-left-pause {  25%, 50%, 75% {    left: 0;  }  37.5%, 62.5%, 87.5% {    left: -100px;  }  100% {    left: 0;  }}

Es posible que sienta un ligero nerviosismo durante la pausa. En el translateXejemplo anterior, hay una pequeña vibración en la pelota mientras slide-left-pauselas animaciones luchan entre sí por el dominio.

Envolver

La mejor opción en cuanto a rendimiento es ocultar el elemento durante el retraso o animarlo transform. Las propiedades de animación como left,, son mucho más intensas en un procesador que la animación margin( aunque la propiedad parece estar cambiando eso).widthopacitycontain

Si tienes alguna idea o comentario sobre esta idea, ¡házmelo saber!

Gracias a Yusuke Nakaya por la animación CSS original de estrellas fugaces que bifurqué en CodePen.