Generador de animación de entrada CSS
Elige el efecto, la duración y la curva y míralo en la vista previa. Activa el modo al desplazar para que los elementos aparezcan a medida que la persona baja por la página.
Cómo usarAnimaciones de entrada para el sitio
Disponible en: 
Generador de animación de entrada CSS: para qué sirve
Elige el efecto, la duración, la curva (con la ease-out fuerte recomendada), la distancia y el retraso en cascada entre los elementos. La vista previa muestra seis bloques entrando y se puede repetir.
El código usa transiciones de opacity y transform, un IntersectionObserver para animar cuando el elemento aparece en pantalla y una versión sin desplazamiento para quien prefiere menos movimiento. Sin JavaScript, el contenido aparece normalmente.
Cómo usar
- Elige el efecto, la duración y la curva.
- Ajusta la distancia y la cascada y mira la vista previa.
- Copia el CSS y el script y usa la clase anima.
Cuándo usar
- Secciones de landing pages que aparecen al desplazar.
- Tarjetas de servicios y productos en cascada.
- Dar acabado a sitios institucionales.
Preguntas frecuentes
¿Qué duración usar?
Para elementos de interfaz, de 150 a 300 milisegundos. En secciones de páginas de presentación, hasta unos 600 ms todavía se siente natural. Las animaciones demasiado largas hacen que el sitio parezca lento.
¿Qué curva elegir?
Para cosas que entran en pantalla, usa una curva que desacelere al final (ease-out fuerte, como cubic-bezier(0.23, 1, 0.32, 1)): el movimiento empieza rápido y se asienta suave. Evita ease-in en las entradas, porque retrasa justo el comienzo.
¿Y quien no quiere movimiento?
El código respeta la configuración de reducir movimiento del sistema (prefers-reduced-motion): los elementos solo aparecen con un fade corto, sin desplazamiento.
¿Cómo funciona el modo al desplazar?
Un IntersectionObserver agrega la clase visivel cuando el elemento entra en pantalla. Sin JavaScript, los elementos aparecen normalmente, sin animación.
¿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.