How the Animation Works

The .ticker-track element contains two identical content groups. The animation moves the complete track left by 50%, which corresponds to the width of one group. Because the second group follows immediately after the first, the ticker restarts seamlessly.

@keyframes ticker-scroll {

  from { transform: translateX(0); }

  to   { transform: translateX(-50%); }

}

Pause the Ticker on Hover

Pausing the ticker on hover gives visitors time to read an individual message.

.ticker-wrapper:hover .ticker-track,

.ticker-wrapper:focus-within .ticker-track {

  animation-play-state: paused;

}

Change the Scrolling Speed

The scrolling speed is controlled by the animation duration. A smaller value moves faster; a larger value moves slower.

.ticker-track {

  animation: ticker-scroll 22s linear infinite;

}

For longer news items, try 25 to 35 seconds. For shorter tickers, 12 to 20 seconds may work better.

Responsive Behavior

The ticker already uses a flexible layout, but the included media query reduces padding and spacing on smaller screens. You can adjust the breakpoint or font size based on your theme.

Accessibility: Reduced Motion

Some users prefer to reduce animation. The demo respects the prefers-reduced-motion setting by stopping the ticker animation and displaying the news items as static content.

@media (prefers-reduced-motion: reduce) {

  .ticker-track {

    animation: none;

    transform: none;

  }

  .ticker-group[aria-hidden=”true”] {

    display: none;

  }

}

Why You Should Avoid the HTML Marquee Tag

The <marquee> element is obsolete and deprecated. Although some browsers may still display it, it should not be used in new projects. CSS animations provide better control over speed, direction, responsiveness, hover states, and accessibility.

Simple Scrolling Text Without a News Label

If you only need scrolling text without the fixed Latest News label, you can use the same animation pattern with a simpler wrapper.

<div class=”scroll-text”>

  <div class=”scroll-track”>

    <span>This is scrolling text created without the marquee tag.</span>

    <span aria-hidden=”true”>This is scrolling text created without the marquee tag.</span>

  </div>

</div>