CSS - Text Sliding Animation

Question

I'm trying to make a top bar that will contain 2 separate texts. The text will slide from the left of screen and Pause in the middle for 5 seconds then continues its way to the right of the screen. and immediately comes the second Text that will do the same thing (Sliding from the left to the right with a pause in the center).

Demo and code: https://codepen.io/robertelo/pen/NWpWwyg

<div class="marquee">
<p>First Text First Text First Text</p>
</div>

<style style="text/css">
.marquee {  
 overflow: hidden;
 position: relative;
 background-color: #cfb53b;
 color: #ffffff;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 1.5;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

Try using 50% or such percentage in animation and also increase animation timing — Nithin - Techidiots
– Nithin - Techidiots, Commented May 6, 2021 at 6:50

Prakash M · Accepted Answer · 2021-05-07 06:22:06Z

2

Here is my try. And I removed position: absolute for P tag which don't need there.

.marquee {  
 overflow: hidden;
 position: relative;
 background-color: #cfb53b;
 color: #ffffff;
}
.marquee p {
 margin: 0;
 line-height: 1.5;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 25%, 75%   { -moz-transform: translateX(0); } /* Stoping Points */
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 25%, 75%   { -webkit-transform: translateX(0); } /* Stoping Points */
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);       
 }
 /* Stoping Points */
  25%, 75%   { 
 -moz-transform: translateX(0); /* Browser bug fix */
 -webkit-transform: translateX(0); /* Browser bug fix */
 transform: translateX(0);      
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

<div class="marquee">
<p>First Text First Text First Text</p>
</div>

Edit:

As per your comment, is this you want to do? Here I got that animation by adding few more points in keyframes. For more information check here :)

.marquee {  
 overflow: hidden;
 position: relative;
 background-color: #cfb53b;
 color: #ffffff;
}
.marqueeText {
 display: flex;
 width: 100%;
 /* Starting position */
 -moz-transform:translateX(0);
 -webkit-transform:translateX(0);   
 transform:translateX(0);
 /* Apply animation to this element */  
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
.marqueeText p {
 width: 100%;
 flex-shrink: 0;
 margin: 0;
 line-height: 1.5;
 text-align: center;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%, 45%, 100% { -moz-transform: translateX(0); }
 50%, 95% { -moz-transform: translateX(-100%); } 
}
@-webkit-keyframes scroll-left {
 0%, 45%, 100% { -webkit-transform: translateX(0); }
 50%, 95% { -webkit-transform: translateX(-100%); } 
}
@keyframes scroll-left {
 0%, 45%, 100% { 
 -moz-transform: translateX(0); /* Browser bug fix */
 -webkit-transform: translateX(0); /* Browser bug fix */
 transform: translateX(0);      
 }
  50%, 95% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%);      
 }
}

<div class="marquee">
<div class="marqueeText"><p>First Text</p><p>Second Text</p></div>
</div>

edited May 7, 2021 at 6:22

answered May 6, 2021 at 6:49

Prakash M

3904 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robertelo Over a year ago

Thanks a lot, but I need a second text to appear immediately just before the first text disappears from the screen.

Robertelo Over a year ago

Something like this but I need only TWO Consecutive phrases with a pause in the middle. code-boxx.com/responsive-pure-css-text-slider/#sec-h

Robertelo Over a year ago

Thanks a lot for your efforts Prakash, really nice, but can't we do it on the same direction? Because I see that it changes the direction.

Collectives™ on Stack Overflow

CSS - Text Sliding Animation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related