Rotating Marquee

Objective

I’m not 100% sure, but I assume the question is as follows:

"How do you create a marquee¹ that scrolls horizontally and brings the text back to the starting edge as soon as it passes the ending edge?"

¹Since <marquee> is deprecated, you should customize one using alternative elements and CSS animation.

Solution – (Not Perfect) ¯_(ツ)_/¯

HTML

1. First, use a non-inline² element as the container/parent. It should have a defined width.
2. Next, use a non-inline element as the content/child — place it within the previously mentioned element (container/parent).
3. Add the text within the content/child element from step #2. Then after the text add a number of spaces equivalent to the width of the text³. Finally, add the same text at the end.⁴

²A non-inline element is basically any element that doesn’t have display: inline assigned to it explicitly or by default. Some common inline elements are: <a>, <b>, <i>, and <u>. If you prefer to use an inline element, be sure to assign it an alternative display value.

³There are a variety of spaces that can be utilized as HTML entities — see Figure I.

⁴The pattern: text spaces text is not perfect, and will need adjusting according to the width of the text. Use a monospace font-family since each character is the same size, matching spaces and text widths will be easier — see Figure II.

Figure I – Spaces

 

  or  

  or  

  or  

  or  

  or  

 

  or  

  or  

  or  

  or  

 

Figure II – Text Spaces Text Pattern

<a>1, 2, 3, 4 &numsp; &numsp; &numsp; &numsp; &numsp; &numsp; 1, 2, 3, 4</a>

CSS

1. Assign a width and overflow: hidden to the container/parent element.

/* example */ .marquee { width: 60vw; overflow: hidden; }

2. Assign the animation shorthand property to the content/child element.

   The space delimited list of values should consist of the following:

   1. The name of the @keyframes at-rule — ex. leftToRight
   2. animation-duration — ex. 3s
   3. animation-timing-function — ex. linear
   4. animation-iteration-count — ex. infinite

/* example */ a { animation: leftToRight 3s linear infinite; }

3. Define a @keyframes at-rule.

 /* example */
 @keyframes leftToRight {
   /** 
    * Start position will be 2.25 times the length of `<a>` to the 
    * left of the beginning of the container/parent element.
    * This value was determined by trial and error so it may vary if
    * the text is a different length. 
    */
    0% { transform: translateX(-225%); }
   /**
    * End position will be the length of `<a>` to the end of the
    * container/parent element.
    */
    100% { transform: translateX(100%); }
  }        

Example

View in Full page mode — Initial display within <iframe> is not rendered correctly

.marquee {
  width: 60vw;
  margin: 20px auto;
  overflow: hidden;
  font: 15vmin/1.5 Consolas;
}

a,
b {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}

a {
  animation: leftToRight 3s linear infinite;
}

b {
  animation: rightToLeft 3s linear infinite;
}

@keyframes leftToRight {
  0% {
    transform: translateX(-225%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes rightToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-225%);
  }
}

<div class='marquee'>
  <a>1, 2, 3, 4 &numsp; &numsp; &numsp; &numsp; &numsp; &numsp; 1, 2, 3, 4</a>
</div>

<div class='marquee'>
  <b>5, 6, 7, 8 &numsp; &numsp; &numsp; &numsp; &numsp; &numsp; 5, 6, 7, 8</b>
</div>