Keyframes + una reproducción
La solución CSS clásica, sin infinite.
Fade 1
Laboratorio aislado
20 formas de hacer un Fade In
Cada demostración usa una estrategia distinta para revelar el mismo elemento. Todas empiezan quietas y se ejecutan mediante su propio botón, salvo las variantes que explícitamente prueban un disparador por viewport o una API moderna.
20 experimentos
Prueba una implementación a la vez
La tarjeta identifica el mecanismo usado y qué conviene observar.
Keyframes + duración configurable
La duración se controla con --fade-duration.
Fade 2
Transition + clase
No utiliza @keyframes; cambia una propiedad de estado.
Fade 3
Checkbox + transition
Interacción sin JavaScript usando un checkbox oculto visualmente.
Fade 4
Opacity + visibility
Reduce parpadeos de interacción al combinar visibilidad con opacidad.
Fade 5
Animation pausada + play-state
La animación existe, pero empieza pausada y solo arranca al hacer clic.
Fade 6
Asignar animation al hacer clic
El elemento está estático hasta que JavaScript le asigna la animación.
Fade 7
Clase + reflow controlado
Usa offsetWidth para separar quitar y volver a poner la clase.
Fade 8
Clonar el elemento para reiniciar
El elemento anterior se reemplaza por una copia limpia y vuelve a animarse.
Fade 9
Estado mediante atributo data
CSS responde a data-state="visible" en lugar de una clase animada.
Fade 10
WAAPI element.animate()
La duración y el estado final se pasan desde JavaScript, no desde CSS.
Fade 11
WAAPI + easing explícito
Permite cambiar duración, delay y aceleración desde un único bloque JS.
Fade 12
KeyframeEffect + Animation
La versión más explícita de WAAPI: efecto, timeline y reproducción separados.
Fade 13
JavaScript con requestAnimationFrame
La opacidad se calcula manualmente en cada frame, sin CSS animation.
Fade 14
JavaScript con setInterval
Alternativa deliberadamente simple para comparar contra requestAnimationFrame.
Fade 15
Transition + estilo inline
El estado inicial y final se escriben directamente en style.opacity.
Fade 16
Viewport + transition
La transición comienza cuando la tarjeta entra en el viewport. Puede ejecutarse una vez.
Entra al viewport
Viewport + keyframes
Prueba el mismo disparador de viewport pero con una animación CSS de una sola ejecución.
Observer + animation
Inserción DOM + @starting-style
El navegador crea el estado inicial para una transición cuando aparece el nodo.
Aquí aparecerá el elemento
View Transition API
Prueba de una transición de documento para cambiar el contenido de la tarjeta. Es una vía avanzada.
Estado A
Qué observar
Cómo interpretar las pruebas
Si fade1 sí funciona
El navegador entiende correctamente una animación CSS normal. El problema del proyecto anterior probablemente está en selectores, sobrescrituras, otras animaciones o en el flujo de reinicio.
Si fade3 funciona pero fade1 no
La transición CSS puede ser un camino más estable para este showcase que mantener una animación CSS en reproducción continua.
Si fade11–13 funcionan
Web Animations API permite sacar el control de duración y reproducción del CSS y mantenerlo en JavaScript.
Si fade14 funciona de forma limpia
El navegador puede controlar una interpolación temporal sin depender de animation ni transition. No es necesariamente la mejor implementación, pero sirve como referencia.
Si fade17–18 funcionan solo al entrar
IntersectionObserver permite evitar animaciones constantes y ejecutarlas únicamente cuando el elemento aparece en la zona visible.
Si casi todos funcionan aquí
Eso apunta a que el comportamiento problemático del proyecto original proviene de su arquitectura concreta y no de una limitación del navegador respecto a duraciones largas.
Listo para experimentar.
Documentación
Dónde está cada parte
| Componente | HTML | CSS | JavaScript | Objetivo |
|---|---|---|---|---|
| Fade In Lab | index.html | components/fade-in/fade-in.css | components/fade-in/fade-in.js | Comparar 20 estrategias |
| Base visual | index.html | css/base.css | — | Layout, controles y accesibilidad |
Las variantes 15 y 20 son deliberadamente experimentales. No se presentan como recomendación automática; están aquí para comparar mecanismos.