Tecnología de animación CSS basada en tiempo

Aprovechando el enfoque basado en tiempo para animaciones CSS

• Ahora que CSS soporta funciones matemáticas, es posible volver a intentar animaciones CSS basadas en el tiempo
  • Se admiten mod(), round(), funciones trigonométricas, entre otras
  • Es posible que debas activar la bandera de funciones experimentales para ver la demo

Idea principal

• Con la API de CSS Houdini puedes definir una variable personalizada para rastrear el tiempo (en milisegundos)
  • Define la variable --t con la regla @property y establece su valor inicial en 0
  • Usa la regla @keyframes para aumentar de forma lineal --t durante 24 horas (86,400,000 ms)
  • Otros valores basados en --t cambian al mismo tiempo para crear el efecto de animación
  • Puedes mostrar el valor de la variable --t con la función counter()

Control de tasa de cuadros

• Mantener una frecuencia de actualización de 60 fotogramas por segundo (fps) es suficiente para una animación fluida
• Si es necesario, puedes controlar manualmente la tasa de cuadros usando la función step()
  • Calcula el valor de FPS deseado en la propiedad animation-timing-function con step()

Conversión de tiempo

• Como el valor de --t crece continuamente en una sola dirección, puede no ser adecuado para algunas propiedades CSS
• Puedes detener la animación con la función min() al alcanzar un valor específico
• Puedes reiniciar la animación con la función mod()
• Puedes crear un efecto de ida y vuelta con la función sin()

Función easing personalizada

• Puedes crear funciones easing personalizadas usando funciones matemáticas y la variable --t
• Permite lograr efectos difíciles de alcanzar con cubic-bezier()
• Ejemplos: ease-out-cubic, ease-out-elastic, etc.

Experimentos con CSS Doodle

• En expresiones complejas, var() y calc() pueden afectar la legibilidad del código
• En css-doodle, la función @t puede representar la variable --t
• En las versiones más recientes de css-doodle se permite usar expresiones matemáticas simples directamente dentro de los argumentos
• También se incorporan las funciones @T y @TS
  • @T indica el tiempo desde el inicio del día
  • @TS es un atajo de @t(/1000) y rastrea el tiempo en segundos
• Puedes implementar ejemplos como un reloj y un movimiento de salto con css-doodle

Conclusión

• Este enfoque de usar el tiempo como variable resulta interesante
• Aunque usar keyframes puede ser más intuitivo, en escenas de demo con muchos cálculos y variables de entrada, usar el tiempo como variable puede ofrecer una gama más diversa de resultados

Opinión de GN⁺

• La técnica de animación CSS basada en tiempo no solo expandirá el alcance de las animaciones que se pueden hacer solo con CSS, sino que también parece aumentar las posibilidades de integración con otras tecnologías como shaders o WebGL
• Combinada con herramientas como CSS Houdini y CSS Doodle, será posible lograr una expresión más flexible y variada
• Sin embargo, habrá aspectos a considerar al aplicarlo en proyectos reales, como compatibilidad entre navegadores o rendimiento. Conviene comparar bien ventajas y desventajas frente al enfoque de Keyframe existente y usarlo de forma selectiva
• También sería útil analizar ventajas y desventajas al compararlo con librerías de animación profesionales como GSAP, y explorar maneras de usarlos de forma complementaria
• Espero que se compartan más ejemplos y casos de uso de animaciones CSS basadas en tiempo para que los desarrolladores frontend puedan probarlas con mayor facilidad

[GN⁺]

Comentario de Hacker News

• Se puede controlar el progreso de una animación con JavaScript usando un valor negativo de animation-delay en CSS. Por ejemplo, si defines animation-delay: -1500ms, arranca de inmediato pero salta al punto de 1,5 s. Manipulando ese valor con JavaScript puedes hacer scrubbing de la animación CSS y dejar que todas las animaciones sean compatibles con un bucle de tick de tipo motor de juego (cálculo-actualización-renderizado).

• Si avanzas más allá de una función de easing simple o de keyframes básicos de una o dos canales, te toparás rápido con los límites de este enfoque. La librería Theatre.js es útil cuando necesitas animaciones afinadas, ya que incluye una UI de estudio con una línea de tiempo para editar keyframes y curvas Bézier, además de un runtime que interpola los valores en función de la línea de tiempo con esos keyframes.

• Este artículo usa @property personalizado de CSS, que tiene una tasa de soporte de navegadores del 88%. Hay que tener en cuenta que la forma de definir los valores iniciales es diferente en cada navegador. Chrome usa el valor inicial cuando el valor no está definido o no es válido, pero Firefox solo lo usa cuando el valor está sin definir. Esto no debería ser un problema en la mayoría de proyectos, pero quizá tengas que establecer el valor predeterminado de Firefox con JavaScript para resolver inconsistencias entre navegadores.

• CSS ya soporta funciones matemáticas suficientes como mod(), round() y funciones trigonométricas. CSS no puede iniciar un temporizador como lo hace JavaScript, pero hoy en día, con la API CSS Houdini, puedes definir variables personalizadas y rastrear el tiempo en milisegundos. Pero si tenemos JavaScript, ¿por qué se necesita todo esto? ¿No debería la capa de render centrarse únicamente en primitivas de render? ¿Por qué insistir en agregar cada vez más capas de alto nivel?

• El reloj que hicieron se ve muy elegante. Es un texto bien escrito. Chrome todavía no ha lanzado soporte CSS para mod(), así que si no usas una versión previa, la mayoría de los ejemplos de la página no se animan.

• Si quieres animaciones CSS fluidas en todos los navegadores sin tener que controlar los ticks, la técnica FLIP es útil.

• Quería una respiración tipo box breathing (inhalar-sostener-exhalar-sostener) donde pudiera personalizar todas las fases para adaptarlo a mi cuerpo y conseguir el efecto que quiero, pero no encontré una forma de hacerlo como en esta página sin JS ni complejidad brutal. Esta página tiene demos realmente creativas.

• Curiosamente, los demos sin mod() funcionan, pero mod() y sin() no hacen nada en Android Chrome actual.

• La animación al final de la página es muy impactante. Parece más un que un elemento.

• Es muy impresionante, pero siento que se está llegando nuevamente a algo parecido a lo que se podía hacer con Flash hace décadas. No deseo que Flash regrese, pero estaría bueno contar con herramientas más amigables para hacer animaciones en CSS.