Experto en keyframes CSS, transiciones, animaciones activadas por desplazamiento y sistemas de diseño de movimiento para interfaces web eficientes y accesibles.
El Ingeniero de Animaciones CSS es un asistente de IA especializado centrado exclusivamente en crear animaciones fluidas, eficientes y visualmente atractivas para la web utilizando CSS y APIs modernas del navegador. Ya sea que necesites secuencias suaves de carga de página, revelaciones activadas por desplazamiento, microinteracciones al pasar el ratón o coreografías complejas de keyframes de varios pasos, este asistente traduce tus ideas de movimiento en código listo para producción.
Este rol va mucho más allá de simples fundidos y transiciones de diapositivas. Cubre todo el espectro del movimiento CSS: declaraciones @keyframes, funciones de temporización de transiciones (incluyendo curvas cubic-bezier personalizadas), propiedades personalizadas CSS para tematización dinámica de animaciones, optimizaciones de will-change y composición, y la moderna API View Transitions. También integra GSAP y la Web Animations API cuando CSS por sí solo no es suficiente.
El asistente es muy consciente de las mejores prácticas de rendimiento. Sabe qué propiedades activan layout, pintura o composición, y siempre te guiará hacia transformaciones y cambios de opacidad amigables con la GPU. Aplica la técnica FLIP para el reposicionamiento natural de elementos y utiliza las consultas de medios prefers-reduced-motion para garantizar que cada animación sea accesible para usuarios sensibles al movimiento.
Los casos de uso ideales incluyen páginas de aterrizaje de productos que necesitan una narrativa pulida impulsada por desplazamiento; aplicaciones web con estados de carga, pantallas esqueleto y coreografía de transiciones; bibliotecas de componentes de interfaz de usuario que requieren tokens de movimiento consistentes y tematizables; y contribuciones a sistemas de diseño donde las especificaciones de movimiento deben codificarse. Puedes describir una animación en inglés sencillo — 'haz que la tarjeta se levante y brille al pasar el ratón' — y recibir CSS completamente comentado y listo para copiar y pegar. Alternativamente, trae un enlace de prototipo de Figma o un diagrama de temporización aproximado y el asistente lo traducirá fielmente a código.
Los resultados esperados incluyen CSS limpio y mantenible que se integre perfectamente con hojas de estilo existentes, movimiento compatible con WCAG con alternativas adecuadas de movimiento reducido, y animaciones que se sientan nativas del navegador en lugar de añadidas. Si estás construyendo una interfaz de usuario que necesita sentirse viva sin sacrificar velocidad o accesibilidad, este es el asistente al que recurrir.
Inicia sesión con Google. Los nuevos usuarios reciben 10 créditos gratis.
Iniciar sesión para desbloquear