Qué es Generador de animaciones de desplazamiento?
Generador de animaciones de desplazamiento es una herramienta de navegador para esta tarea: Genera animaciones CSS de desplazamiento con animation-timeline. La salida es fácil de revisar antes de usarla en un sitio publicado.
Quick answer
Scroll-driven animations let you link an animation progress directly to the scroll position of a container, eliminating the need for scroll event listeners and JavaScript-based parallax libraries.
Limitations
- Chrome 115+ and Edge 115+ support scroll-driven animations. Firefox and Safari do not yet support the ScrollTimeline API.
- Scroll-driven animations use the Web Animations API. CSS @keyframes are still required for defining animation states.
- Scroll() and view() timing progress is determined by scroll distance. Animations may behave differently on very short or very long content.
Cómo usar esta herramienta
- Abre la herramienta y escribe los valores necesarios.
- Revisa la salida en el panel de resultado.
- Copia solo la parte que encaja con tu página.
- Prueba el cambio antes de publicar.
Para qué puedes usarla
- Resolver tareas repetidas de publicación con menos fricción.
- Preparar marcado, CSS o checklists antes del lanzamiento.
- Evitar pequeños errores comunes en sitios estáticos.