How can I create a marquee effect?

Question

I'm creating a marquee effect with CSS3 animation.

#caption {      position: fixed;      bottom: 0;      left: 0;      font-size: 20px;      line-height: 30px;      height:30px;      width: 100%;      white-space: nowrap;      -moz-animation:  caption 50s linear 0s infinite;      -webkit-animation:  caption 50s linear 0s infinite;  }  @-moz-keyframes caption {       0% { margin-left:120%; } 100% { margin-left:-4200px; }    }  @-webkit-keyframes caption {       0% { margin-left:120%; } 100% { margin-left:-4200px; }    }

<div id="caption">      The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.  </div>

Now I can get the basic marquee effect, but the code is too specific for this demo.

Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?

Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.

Answer 1

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):

.marquee {   width: 450px;   margin: 0 auto;   overflow: hidden;   box-sizing: border-box; }  .marquee span {   display: inline-block;   width: max-content;    padding-left: 100%;   /* show the marquee just outside the paragraph */   will-change: transform;   animation: marquee 15s linear infinite; }  .marquee span:hover {   animation-play-state: paused }   @keyframes marquee {   0% { transform: translate(0, 0); }   100% { transform: translate(-100%, 0); } }   /* Respect user preferences about animations */  @media (prefers-reduced-motion: reduce) {   .marquee span {     animation-iteration-count: 1;     animation-duration: 0.01;      /* instead of animation: none, so an animationend event is       * still available, if previously attached.      */     width: auto;     padding-left: 0;   } }

<p class="marquee">    <span>        When I had journeyed half of our life's way, I found myself        within a shadowed forest, for I had lost the path that         does not stray. – (Dante Alighieri, <i>Divine Comedy</i>.         1265-1321)    </span>    </p>

---

No hardcoded values — dependent on paragraph width — have been inserted.

The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.

If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)

Answer 2

Based on the previous reply, mainly @fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.

No hardcoded value other than the scroll time, best suited for small scroll spaces

.marquee {     width: 100%;     margin: 0 auto;     white-space: nowrap;     overflow: hidden;     box-sizing: border-box;     display: inline-flex;     }  .marquee span {     display: flex;             flex-basis: 100%;     animation: marquee-reset;     animation-play-state: paused;                 }  .marquee:hover> span {     animation: marquee 2s linear infinite;     animation-play-state: running; }  @keyframes marquee {     0% {         transform: translate(0%, 0);     }         50% {         transform: translate(-100%, 0);     }     50.001% {         transform: translate(100%, 0);     }     100% {         transform: translate(0%, 0);     } } @keyframes marquee-reset {     0% {         transform: translate(0%, 0);     }   }

<span class="marquee">     <span>This is the marquee text (hover the mouse here)</span> </span>