Pause & Loop CSS Animaciones con WAIT! Animar

Hay mucho que puedes hacer con la animación pura de CSS, pero hacer una pausa y hacer un bucle en una animación no es posible con la actual especificación W3.

Pero con una herramienta gratuita como ¡ESPERE! Animar puedes en realidad Crea animaciones en bucle desde cero con retrasos personalizados entre cada bucle. Esto puede parecer una tarea mundana pero resuelve un punto difícil para muchos desarrolladores.

Cabe señalar que hay una propiedad CSS llamada animación-retraso cual retrasa el comienzo de una animacion CSS. De todos modos, eso No afecta a una animación que se repite. ya que solo retrasa el punto de partida.

¡ESPERE! Animar auto-calcula ¿Cuántas pausas deben colocarse dentro de fotogramas clave de animación personalizados para crear la duración exacta de la pausa Necesitas entre bucles. Esto se puede hacer a mano pero está extremadamente convuelto, sin mencionar que es muy molesto..

Esta aplicación web puede trabaja con cualquier característica de animación CSS3, Incluyendo rotaciones y transformaciones. No estás escribiendo ninguna nueva propiedad CSS, sino más bien construyendo sobre la función de fotogramas clave crear pausas basadas en porcentajes (del 0% al 100%) dentro de la animación..

Echa un vistazo a la página de inicio para ver algunos ejemplos en acción. Es bastante claro lo que puede hacer y el código fuente está ahí para copiar / pegar en su propio trabajo.

Por favor, tenga en cuenta que esto es no es una biblioteca completa. Es un generador que crea su código CSS sobre la marcha Basado en lo que necesites para el retraso de la animación..

Si desea una solución más sencilla fuera del sitio, entonces puede descargar el mixin de Sass. Esto es un poco más complicado porque se requiere un mapa Sass, por lo que deberá comprender cómo agregar propiedades personalizadas y escribir su sintaxis correctamente.

Aquí hay un ejemplo de cómo te llama al mixin:

 @include waitAnimate ((animationName: animName, fotogramas clave: (0: (transformación: escala (1), color de fondo: azul), 50: (transformación: escala (2), color de fondo: verde), 100: (transformación : escala (3), color de fondo: rojo), duración: 2, waitTime: 1, timingFunción: facilidad, iterationCount: infinito)); 

Los desarrolladores web profesionales no deberían tener problemas para aprender las cuerdas y convertir esto en una mezcla reutilizable. Pero los desarrolladores novatos pueden tener dificultades para que funcione, de ahí la aplicación web.

Todo esto código fuente está disponible de forma gratuita en GitHub Si desea descargar una copia localmente. Pero dado que esta es una característica tan extraña, no es algo que probablemente necesite en muchos proyectos. Es por eso que la espera! La aplicación web animada debería ser más que suficiente para ayudarte resolver un problema de una sola vez de Retrasar las animaciones en bucle con CSS puro..

Es un hack muy divertido que también es bastante oscuro por su diseño. Pero va a mostrar cuánto es posible con CSS3 y un poco de ingenio..