✦ HORIZONTAL MARQUEE ✦

★ LIVE DEMO

This is how the final result will look on your webpage:

★ STEP 1: HTML STRUCTURE

The <marquee> tag used to be used for this, but nowadays it's deprecated and doesn't work well across all browsers. To do it in a modern, clean way we use two containers:

• marquee-container: Acts as the visible window with overflow: hidden to hide the text that goes off screen.
• marquee-content: Is the long text that will move smoothly from right to left using CSS animation.

<div class="marquee-container">
  <div class="marquee-content">
    ✦ YOUR TEXT HERE ✦ SECOND MESSAGE ✦ THIRD MESSAGE ✦
  </div>
</div>

★ STEP 2: CSS STYLES

Apply the styles in your CSS file. The key to the continuous movement is the @keyframes marquee rule, which moves the text from translateX(0) to translateX(-100%).

/* Contenedor principal (máscara) */
.marquee-container {
  background: #e55c8a; /* Color de fondo rosa oscuro */
  color: #ffffff;      /* Color del texto */
  padding: 8px 0;
  margin: 15px 0;
  border-radius: 20px;
  overflow: hidden;     /* Oculta lo que sale del recuadro */
  white-space: nowrap;  /* Evita que el texto salte de línea */
  border: 2px solid #ffffff;
}

/* Texto en movimiento */
.marquee-content {
  display: inline-block;
  padding-left: 100%;   /* Empieza fuera de la pantalla a la derecha */
  font-family: 'Silkscreen', cursive;
  font-size: 16px;
  animation: marquee 15s linear infinite; /* Animación continua */
}

/* Animación del teleprompter */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

★ CUSTOMIZATION AND TIPS

• Change speed: Modify the seconds in animation: marquee 15s ... (example: 10s will go faster, 25s will go slower).
• Pause on hover: If you want the user to be able to read carefully by hovering the cursor over it, add this snippet to your CSS:

  .marquee-container:hover .marquee-content {
    animation-play-state: paused;
  }