Animación al hacer scroll en la página (scroll reveal en CSS)
Elige el efecto y desplázate por la vista previa. La animación sigue el desplazamiento, sin JavaScript y sin biblioteca.
Cómo usarSecciones que aparecen mientras el visitante se desplaza
Desplázate dentro de la vista previa para ver el efecto (en Chrome, Edge o Safari 26+).
Disponible en: 
Animación al hacer scroll en la página (scroll reveal en CSS): para qué sirve
Las secciones que aparecen mientras el visitante se desplaza dan más vida a la página. Este generador crea el efecto solo con CSS, usando las animaciones ligadas al desplazamiento (animation-timeline: view()), sin bibliotecas como AOS o ScrollReveal.
Elige el efecto (subir, solo aparecer, deslizar desde los lados, crecer o salir del desenfoque), la distancia y en qué punto de la entrada a la pantalla termina la animación, y desplázate por la vista previa. El código va dentro de un @supports, así que en Firefox, que aún mantiene la función detrás de una opción experimental, los elementos aparecen normales en lugar de quedar invisibles, y respeta a quienes pidieron menos movimiento.
Cómo usar
- Elige el efecto y la distancia.
- Define en qué punto termina la animación.
- Copia el CSS y aplica la clase a las secciones.
Cuándo usar
- Landing pages.
- Secciones de servicios y testimonios.
- Portafolios.
Preguntas frecuentes
¿Funciona en todos los navegadores?
Las animaciones ligadas al desplazamiento (animation-timeline) funcionan en Chrome, Edge y Safari 26 o más reciente. En Firefox todavía están detrás de una opción experimental. Por eso el código va dentro de un @supports: donde la función no existe, los elementos simplemente aparecen normales, sin quedar invisibles.
¿Por qué no usar una biblioteca como AOS o ScrollReveal?
Esas bibliotecas usan JavaScript para observar el desplazamiento, lo que pesa en la carga y puede trabarse en celulares modestos. Con animation-timeline, el propio navegador se encarga de la animación y el sitio queda más liviano.
¿Y quienes prefieren menos movimiento?
El código respeta prefers-reduced-motion: para quienes activaron esa opción, los elementos aparecen sin deslizarse ni crecer.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.