¡Animaciones CSS de pausa y bucle con WAIT! Animar

Hay muchas cosas que puedes hacer con animación CSS pura, pero no es posible pausar y repetir una animación con la especificación W3 actual.

¡Pero con una herramienta gratuita como WAIT! Animar puede crear animaciones en bucle desde cero con retrasos personalizados entre cada ciclo. Esto puede parecer una tarea mundana pero resuelve un punto doloroso para muchos desarrolladores.

Cabe señalar que existe una propiedad CSS llamada animation-delay que retrasa el inicio de una animación CSS . Sin embargo , no afecta a una animación repetitiva ya que solo retrasa el punto de inicio.

¡ESPERE! Animar calcula automáticamente cuántas pausas deben colocarse dentro de fotogramas clave de animación personalizados para crear la duración de pausa exacta que necesita entre bucles. Esto podría hacerse a mano, pero es extremadamente convolucionado, por no mencionar súper molesto.

Esta aplicación web puede funcionar con cualquier característica de animación CSS3, incluidas rotaciones y transformaciones. No está escribiendo ninguna nueva propiedad de CSS, sino que se basa en la función de fotogramas clave para crear pausas basadas en porcentajes (de 0% a 100%) dentro de la animación.

Consulte la página de inicio para ver algunos ejemplos en acción . Está bastante claro lo que puedes hacer y el código fuente está ahí para copiar / pegar en tu propio trabajo.

Tenga en cuenta que esta no es una biblioteca propiamente dicha. Es un generador que crea su código CSS sobre la marcha en función de lo que necesite para el retraso de la animación.

Si desea una solución más simple fuera del sitio, puede descargar la mezcla de Sass . Esto es un poco más complicado porque 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 llamarías a mixin :

 @include waitAnimate ((animationName: animName, keyframes: (0: (transformación: 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 deberían tener problemas para aprender las cuerdas y construir esto en una mezcla reutilizable. Pero los desarrolladores novatos pueden tener dificultades para hacerlo funcionar, de ahí la aplicación web.

Todo este 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 ESPERE! La aplicación web Animate debería ser más que suficiente para ayudarte a resolver un problema aislado de retrasar las animaciones en bucle con CSS puro .

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