es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


¡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.

10 cosas que los teléfonos con Windows funcionan mejor que los teléfonos con Android

10 cosas que los teléfonos con Windows funcionan mejor que los teléfonos con Android

Muy bien, bien, cálmense, guerreros del teclado, sabemos que esto es algo con lo que la mayoría de ustedes probablemente no estarían de acuerdo porque, enfrentémoslo, con más del 80 por ciento de la cuota de mercado de teléfonos inteligentes en el mundo, el sistema operativo móvil Android lidera el resto del competencia por una milla.Tal ve

(Consejos de tecnología y diseño)

Cómo comparar revisiones de imágenes en Github

Cómo comparar revisiones de imágenes en Github

Con Git, no solo puedes rastrear los cambios en el código, también puedes comparar los cambios (también conocido como diff ). Y en caso de que las revisiones salgan mal, puede volver a las versiones anteriores fácilmente. También puede comparar los cambios de código de manera fácil e intuitiva con Github.Aunque

(Consejos de tecnología y diseño)