Cinta en movimiento: animacion CSS (Cintas) con HTML y CSS listos para usar

Vista previa

CSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-ready

HTML + CSS

<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__lane">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
    <div class="marquee__lane" aria-hidden="true">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
  </div>
</div>

<style>
.marquee {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(120deg, #0f172a, #0b253f);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee::after,
.marquee::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marquee::before {
  background: linear-gradient(90deg, #0f172a 0%, transparent 14%, transparent 86%, #0f172a 100%);
}

.marquee::after {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  inset: 6px;
}

.marquee__lane {
  display: flex;
  gap: 32px;
  padding: 16px 22px;
  font-size: 14px;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: max-content;
  flex-shrink: 0;
}

.marquee__lane span {
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.86);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
  will-change: transform;
}

@keyframes scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
</style>

Que es la animacion CSS tipo cinta y por que la usan los equipos

Una cinta es un patron marquee infinito que mantiene el contenido en movimiento sin romper el layout. Es util cuando necesitas mostrar actualizaciones cortas, mensajes promocionales o destacados de marca sin perder una jerarquia visual limpia.

Donde funciona mejor la cinta en interfaces de produccion

Usa la cinta en hero sections, barras de estado, lineas de confianza, franjas de anuncios y carriles compactos de contenido. Manten una velocidad moderada y un contraste alto para que el componente siga siendo legible y util en lugar de convertirse en ruido visual.

Como adaptar este snippet de cinta a tu producto

Puedes ajustar espaciado, duracion, tipografia y superficie del degradado para alinearlo con tu sistema de diseno. Para accesibilidad, anade pausa al pasar el cursor y alternativas con reduced-motion para que quienes prefieren menos movimiento reciban la misma informacion.

Related animation examples

Desplazamiento vertical Cinta de noticias