純CSS連續水平文本無間斷滾動

Question

我正在嘗試創建一個連續滾動而無需在循環之間中斷的水平文本的新聞滾動器。理想情況下，解決方案將是純粹的CSS/HTML，但我不知道這是可能的。這是我迄今爲止的基本嘗試：http://jsfiddle.net/lgants/ncgsrnza/。請注意，小提琴包含每個循環之間不需要的中斷。

<p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p> 


.marquee { 
    margin: 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.marquee span { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 5s linear infinite; 
} 

Answer 1

你可以試試有兩個帳篷，並設置其中的一個具有2.5秒的延遲動畫這是全動畫（5秒）的一半的時間。

.marquee { 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 

 
.marquee span { 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: marquee 5s linear infinite; 
 
} 
 

 
.marquee2 span { 
 
    animation-delay: 2.5s; 
 
} 
 

 
@keyframes marquee { 
 
    0% { 
 
    transform: translate(0, 0); 
 
    } 
 
    100% { 
 
    transform: translate(-100%, 0); 
 
    } 
 
}

<p class="marquee"> 
 
    <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span> 
 
</p> 
 
<p class="marquee marquee2"> 
 
    <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span> 
 
</p>