11/05/2026
En los albores de la web, una etiqueta HTML reinaba en muchas páginas para añadir un toque de dinamismo: la etiqueta <marquee>. Permitía crear textos e imágenes que se deslizaban horizontal o verticalmente por la pantalla, un efecto que, aunque hoy pueda parecer básico, era toda una revolución. Sin embargo, los tiempos han cambiado. Esa etiqueta ha quedado obsoleta y su uso está totalmente desaconsejado por problemas de rendimiento, accesibilidad y falta de estandarización. Pero no te preocupes, el espíritu de ese efecto sigue vivo. En este artículo, te guiaremos paso a paso para que aprendas a recrear y mejorar el clásico efecto marquee utilizando únicamente el poder del CSS moderno, logrando animaciones fluidas, eficientes y totalmente personalizables.
¿Qué era y por qué no debemos usar <marquee>?
La etiqueta <marquee> era un elemento no estándar de HTML que permitía que su contenido se desplazara por la pantalla. Contaba con varios atributos para controlar su comportamiento:
- behavior: Definía el tipo de movimiento (
scroll,slide,alternate). - direction: Establecía la dirección del desplazamiento (
left,right,up,down). - scrolldelay: Controlaba el tiempo en milisegundos entre cada movimiento.
- scrollamount: Especificaba cuántos píxeles se movía el contenido en cada intervalo.
A pesar de su aparente utilidad, fue oficialmente deprecada. Las razones son claras: violaba el principio de separación de responsabilidades (el comportamiento no debe definirse en el HTML, sino en el CSS o JavaScript), causaba problemas de accesibilidad para personas con dificultades de lectura y generaba un mal rendimiento al forzar al navegador a recalcular constantemente el diseño de la página (reflow).
Recreando el Marquee Básico con CSS
Vamos a empezar por replicar el efecto más simple: un texto que se desplaza de un lado a otro de la pantalla y vuelve a empezar. Para ello, usaremos posicionamiento absoluto y una animación con @keyframes.
La Estructura HTML
Nuestra estructura base será muy sencilla. Necesitamos un contenedor que delimite el área visible de la animación y un elemento interno que será el que se mueva.
<div class="container-marquee"> <p class="texto-marquee">Este es un texto deslizante básico...</p> </div>El Estilo CSS y la Animación
Aquí es donde ocurre la magia. Primero, configuramos el contenedor para que oculte todo lo que se salga de sus límites y sirva como referencia para el posicionamiento del texto.
.container-marquee { position: relative; /* Necesario para el posicionamiento absoluto del hijo */ width: 100%; overflow: hidden; /* ¡Clave! Oculta el texto cuando está fuera del contenedor */ height: 5rem; /* O la altura que necesites */ background-color: #f0f0f0; border: 1px solid #ccc; } .texto-marquee { position: absolute; font-size: 2.5rem; font-weight: bold; text-transform: uppercase; white-space: nowrap; /* Evita que el texto se divida en varias líneas */ /* La animación que crearemos a continuación */ animation: marquee-basico 10s infinite linear; }Ahora, definimos la animación marquee-basico usando @keyframes. La idea es mover el texto desde justo fuera del borde derecho del contenedor hasta justo fuera del borde izquierdo.
@keyframes marquee-basico { 0% { /* El texto empieza justo fuera del borde derecho del contenedor */ left: 100%; } 100% { /* El texto termina completamente fuera del borde izquierdo */ left: 0; transform: translateX(-100%); } }En el estado inicial (0%), left: 100% posiciona el inicio del texto en el borde derecho del contenedor. En el estado final (100%), lo movemos al borde izquierdo con left: 0 y luego lo desplazamos completamente hacia la izquierda con transform: translateX(-100%). Usar transform es crucial para asegurar que el texto desaparezca por completo antes de que la animación se reinicie.
Creando un Bucle Infinito y Fluido
El método anterior es funcional, pero el texto desaparece por completo antes de volver a aparecer. El efecto más deseado suele ser un bucle continuo, donde el texto parece no tener fin. Para lograrlo, duplicaremos el contenido y usaremos Flexbox.
La Estructura HTML Duplicada
La clave aquí es tener el mismo contenido dos veces. Cuando el primer bloque de texto desaparece por la izquierda, el segundo ya está entrando por la derecha, creando una ilusión de continuidad perfecta.
<div class="container-infinito"> <div class="contenido-loop"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> <span>React</span> <span>Node.js</span> <span>HTML</span> <!-- Repetimos el contenido --> <span>CSS</span> <span>JavaScript</span> <span>React</span> <span>Node.js</span> </div> </div>El Poder de Flexbox y `transform`
En el CSS, usaremos display: flex para alinear los elementos y animaremos el contenedor de ambos bloques de texto.
.container-infinito { width: 100%; overflow: hidden; display: flex; white-space: nowrap; } .contenido-loop { display: flex; /* La animación que definiremos ahora */ animation: loop-infinito 15s infinite linear; } .contenido-loop span { font-size: clamp(2rem, 8vw, 5rem); /* Fuente responsiva con clamp() */ font-weight: 700; padding: 0 1em; text-transform: uppercase; }La animación es más sencilla esta vez. Solo necesitamos desplazar el contenedor hacia la izquierda en una distancia equivalente a la mitad de su ancho total (que es el ancho de un solo bloque de contenido).
@keyframes loop-infinito { from { transform: translateX(0); } to { /* Desplazamos el contenedor a la izquierda en un 50% de su propio ancho */ transform: translateX(-50%); } }Con esta técnica, mientras el primer grupo de palabras se desplaza fuera de la vista, el segundo grupo (su clon exacto) entra para tomar su lugar. Como la animación se repite infinitamente, el efecto es un bucle perfecto y sin interrupciones.
Tabla Comparativa: <marquee> vs. CSS
Para dejar claras las ventajas del método moderno, aquí tienes una comparación directa:
| Característica | Etiqueta <marquee> | Método CSS con `transform` |
|---|---|---|
| Rendimiento | Bajo. Causa reflow constante, consumiendo más CPU. | Alto. Las animaciones con `transform` son aceleradas por GPU, mucho más eficientes. |
| Personalización | Limitada a sus atributos. Difícil de estilizar. | Total. Se puede combinar con cualquier propiedad CSS, pseudoclases como `:hover`, etc. |
| Estándar Web | Obsoleta. No debe usarse en producción. | Estándar actual. Soportado por todos los navegadores modernos. |
| Accesibilidad | Pobre. El movimiento constante dificulta la lectura. | Mejorable. Se puede pausar la animación con `:hover` o mediante la media query `prefers-reduced-motion`. |
Preguntas Frecuentes (FAQ)
¿Por qué es mejor animar `transform` en lugar de `left` o `margin`?
Animar propiedades como left, top o margin obliga al navegador a recalcular el layout de la página en cada fotograma de la animación, un proceso costoso conocido como "reflow" o "layout thrashing". En cambio, la propiedad transform opera en una capa de composición separada, permitiendo que la GPU del dispositivo se encargue del movimiento sin afectar al resto del layout. Esto resulta en animaciones mucho más fluidas y con un menor consumo de recursos.
¿Cómo puedo hacer que la animación se detenga al pasar el ratón por encima?
¡Es muy fácil con CSS! Puedes usar la pseudoclase `:hover` en el contenedor y la propiedad `animation-play-state` para pausar la animación. Esto mejora la usabilidad y la accesibilidad, ya que permite al usuario leer el contenido con calma.
.container-infinito:hover .contenido-loop { animation-play-state: paused; }¿Puedo usar imágenes u otros elementos en lugar de texto?
Absolutamente. La técnica del bucle infinito con Flexbox funciona con cualquier tipo de elemento HTML. Puedes colocar etiquetas <img>, <div> con tarjetas de productos, iconos SVG, o lo que se te ocurra. Simplemente asegúrate de que el contenido se repita de la misma manera para lograr el efecto de bucle continuo.
¿Qué es la función `clamp()` que usaste en el ejemplo?
La función clamp() es una herramienta de CSS increíblemente útil para la tipografía fluida y el diseño responsivo sin necesidad de media queries. Acepta tres valores: un mínimo, un valor preferido y un máximo. Por ejemplo, font-size: clamp(1rem, 5vw, 2rem); le dice al navegador que el tamaño de la fuente debe ser idealmente el 5% del ancho de la ventana (5vw), pero sin ser nunca más pequeño que 1rem ni más grande que 2rem. Es una forma concisa y moderna de crear diseños que se adaptan perfectamente a cualquier tamaño de pantalla.
Conclusión
La etiqueta <marquee> puede ser una reliquia del pasado, pero el efecto visual de desplazamiento sigue siendo una herramienta de diseño atractiva y útil cuando se implementa correctamente. Al utilizar técnicas modernas de CSS como Flexbox, @keyframes y la propiedad transform, no solo podemos replicar ese efecto, sino que lo hacemos de una manera eficiente, personalizable y respetuosa con los estándares web actuales. Ahora tienes el conocimiento para añadir animaciones de texto deslizante a tus proyectos de forma profesional y optimizada. ¡Experimenta con velocidades, contenidos y direcciones para dar un toque único a tus diseños!
Si quieres conocer otros artículos parecidos a El Efecto Marquee: Revívelo con CSS Moderno puedes visitar la categoría Juegos.