Puedes llegar a hacer un montón de cosas con las animaciones CSS, pero pausar y reproducir en bucle una animación no es posible con la actual especificación W3. De todos modos, una herramienta gratuita cuyo nombres es WAIT! Animate puedes crear animaciones en bucle desde cero con delays personalizados entre cada una de las vueltas del bucle. Esto puede parecer algo mundano, pero creeme cuando te digo que eliminará muchos dolores de cabeza en esos desarrolladores que se matan haciendo animaciones CSS.
Cabe señalar que existe una propiedad de CSS llamada animation-delay que retrasa el inicio de una animación CSS. Sin embargo, no afecta a una animación que se repite, ya que solo retrasa su reproducción inicial.
WAIT! Animate auto-calcula cuántas pausas deben introducirse dentro de los fotogramas clave para crear la duración de la pausa exacta que necesitas entre dos loops. Esto puede llegar a realizarse a mano, pero es una tarea super tediosa, a la par que compleja.
Esta aplicación web funciona con cualquier función para animaciones de CSS3, incluyendo rotaciones y transformaciones. Lo que realiza esta herramienta son pausas basadas en porcentajes, desde el 0% al 100%, dentro de la animación, cuando finalice la reproducción del primer loop.
Echa un vistazo a la página de WAIT! Animate para ver algunos ejemplos en acción. Está bastante claro lo que puedes llegar a hacer y el código fuente generado, el cual puedes copiar/pegar en tus propios proyectos.
Ten en cuenta que esto no es una librería. Es un generador de código CSS para generar pausas entre los loops de tus animaciones de CSS.
Si quieres una solución sencilla, puedes descarga el mixin de Sass. Esto es un poco más complejo porque requiere un mapa Sass, asi que tendrás que saber cómo agregar propiedades personalizadas y cómo escribir la sintáxis de forma correcta.
He aquí un ejemplo de cómo tendrías que llamar al mixin:
@include waitAnimate(
(
animationName: animName,
keyframes: (
0: (
transform: scale(1),
background-color: blue
),
50: (
transform: scale(2),
background-color: green
),
100: (
transform: scale(3),
background-color: red
)
),
duration: 2,
waitTime: 1,
timingFunction: ease,
iterationCount: infinite
)
);
Los desarrolladores web profesionales no tendrán problemas a la hora de aprender a utilizarlo y de convertirlo en un mixin reutilizable. Pero los más novatos, puede que tengan más problemas para integrarlo en su aplicación web.
Todo el código está disponible de forma gratuita en GitHub por si te quieres sacar copia en tu equipo local. Pero sinceramente, tampoco merece la pena tenerlo descargado ya que es una característica extraña, que dudo vayas a utilizar en muchos de tus proyectos. Por eso, la aplicación web de WAIT! Animate debe ser más que suficiente para ayudarte a resolver retrasando cada una de las vueltas de tus animaciones en bucle creadas en CSS puro.
Es increíble todo lo que se puede lograr con un poco de CSS y con una pizca de ingenio, ¿verdad?
Fuente: hongkiat.com