CSS - 文本滑动动画

Question

我正在尝试制作一个包含 2 个单独文本的顶部栏。文本将从屏幕左侧滑动并在中间暂停 5 秒，然后继续向屏幕右侧移动。 并立即出现第二个将执行相同操作的文本（从左向右滑动，中间有一个暂停）。

演示和代码： 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>

Answer 1

这是我的尝试。我删除了不需要的 P 标签的 position: absolute。

.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>

编辑：

根据您的评论，您想这样做吗？在这里，我通过在关键帧中添加更多点来获得该动画。欲了解更多信息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>