HTML Marquee Loop: Repeat Scrolling Text

Q: How do I repeat a CSS animation three times?

Use animation-iteration-count: 3, or include the value in the animation shorthand.

Q: How do I repeat a CSS animation forever?

Use animation-iteration-count: infinite.

Marquee Tag HTML Marquee tag Marquee Speed Marquee Behavior Marquee Direction Marquee MouseOver

The legacy <marquee> element used the loop attribute to control how many times moving content repeated. A positive number such as 3 requests three cycles; continuous movement was commonly written with a non-standard value such as infinite.

For new pages: <marquee> is obsolete. Use CSS animations and animation-iteration-count to control how many times an animation repeats.

Legacy marquee loop examples Top ↑

These examples are retained for understanding and maintaining older pages.

Loop once Top ↑

This is an example of Marquee (Loop: 1)

<marquee style="font-family:Book Antiqua;color:#fff;background:#000080"
  scrollamount="5" loop="1">
  This is an example of Marquee (Loop: 1)
</marquee>

Continuous legacy loop Top ↑

This is an example of Marquee (Loop: Infinite)

<marquee style="font-family:Book Antiqua;color:#fff;background:#000080"
  scrollamount="5" loop="infinite">
  This is an example of Marquee (Loop: Infinite)
</marquee>

infinite is legacy/non-standard usage. Do not copy it into new HTML.

Loop three times Top ↑

This is an example of Marquee (Loop: 3)

<marquee style="font-family:Book Antiqua;color:#fff;background:#000080"
  scrollamount="5" loop="3">
  This is an example of Marquee (Loop: 3)
</marquee>

The finite examples stop after their requested number of cycles. Reload the page to run those legacy marquee animations again.

Modern CSS repeat count Top ↑

CSS uses animation-iteration-count. Set a positive number for a finite animation or infinite for continuous repetition.

<style>
.ticker {
  display: inline-block;
  animation: move-left 8s linear 3;
}
@keyframes move-left {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>

<div class="ticker">Moves three times</div>

For continuous repetition, change the final value from 3 to infinite.

.ticker {
  animation: move-left 8s linear infinite;
}

Reduced-motion accessibility Top ↑

Repeated movement can distract or make content difficult to use. Respect users who request reduced motion.

@media (prefers-reduced-motion: reduce) {
  .ticker {
    animation: none;
  }
}

If moving content carries important information, make sure the same information remains available when animation is disabled.

Common mistakes Top ↑

Using marquee for new projects: use CSS animations instead.
Confusing loop count with speed: repeat count controls cycles; speed is controlled separately.
Using movement for essential information only: content must remain understandable without animation.
Ignoring reduced-motion preferences: provide a non-moving experience where appropriate.

HTML Marquee Tag Marquee Speed Marquee Behavior Marquee Direction Start and Stop Marquee on Mouse Events

Video: legacy marquee options Top ↑

HTML marquee tag to scroll or alternate text or image on web page with various speed and direction

Frequently Asked Questions Top ↑

Q1: What did the marquee loop attribute do?

It controlled how many times legacy marquee content repeated its movement.

Q2: Can I use loop="3" on a marquee?

Older browsers may still interpret it, but marquee is obsolete and should not be used for new pages.

Q3: How do I repeat a CSS animation three times?

Use animation-iteration-count: 3, or include the value in the animation shorthand.

Q4: How do I repeat a CSS animation forever?

Use animation-iteration-count: infinite.

Q5: Does loop control marquee speed?

No. Loop controls repetition count; speed is controlled separately by legacy speed attributes or, in modern CSS, animation duration.

Q6: Should repeating animations respect reduced-motion settings?

Yes. Disable or reduce non-essential motion when users request reduced motion.

HTML Marquee Tag Marquee Direction Marquee Speed

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

	18-06-2020
But why is their not any action taking place in both loop1 and loop3

	24-06-2020
loop1 and loop3 stops after completing their loops. You need to refresh the page to move them again.

	28-11-2020
I used the marquee for a movie closing credits session on an "a href" button and combined it with a warning message box function But this marquee always runs before we open the link, how to make this marquee run only when we click the link, I think this using some sort of JS / jQuery

	04-12-2020
You can keep a div or span tag in hidden by default. Make it visible ( inline ) only when the button is clicked. You can directly write the code with click event of the button.

	26-09-2022
Sire, i know infinite loop , actually it's by default infinite while we using <marquee> tag....But I need endless loop.....Like the text never been end.....It's circular....Like it's end connected to head... Thanks

HTML Marquee Loop: Repeat Scrolling Content