爲什麼我的CSS3選框動畫重新啓動？

所以我知道選取框動畫就像是完全1999年，但我真的需要爲我的項目滾動文本。爲什麼我的CSS3選框動畫重新啓動？

基本上，我有一個文本，應該瀏覽器窗口（視口？）一路滾動，並在整個重新開始之前一路重新開始之前一路屏蔽。一個簡單的選取框。但是，當我加載頁面時，文本只會滾動頁面的一部分，然後在沒有完成滾動的情況下重置爲開頭。

這裏是我的代碼（鏈接文本是從早期的問題，我遇到了，但已經解決了。）

a { 
 
\t margin: auto; 
 
    text-decoration: none; 
 
\t -webkit-animation: marquee 10s linear infinite; 
 
\t } 
 

 
@-webkit-keyframes marquee { 
 
\t 0% { -webkit-transform: translateX(1500px) } 
 
\t 100% { -webkit-transform: translateX(-500px) } 
 
\t }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 
\t \t <a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts 
 
a certain amount of space from the total width, causing the others behind it to move faster.</a> 
 
\t 
 
</body> 
 
</html>

我試圖改變的元素的定位性能和動畫的持續時間，但似乎沒有給我我非常渴望的結果？

來源

2015-10-16 Alex Mozeak

我剛剛運行你的代碼，它工作正常。我不明白你的問題 – 2015-10-16 22:05:54

您可以使用vw，這是用於視區寬度。這是一個百分比，雖然你不添加百分號。所以100vw是視口寬度的100％。然後，您可以從100％到-100％選取文字從右向左移動。 100vw表示文本從右側屏幕外部開始。 -100vw表示文本移動直到它離開左側，假設a標籤本身（至多）是屏幕寬度（最多100vw）。

動畫的結束值應該是元素寬度的負值。例如，如果您的標籤寬度爲200像素，則動畫的起始值仍應爲100vw，但最終值應爲-200px。

a { 
 
    margin: auto; 
 
    text-decoration: none; 
 
    -webkit-animation: marquee 10s linear infinite; 
 
} 
 
@-webkit-keyframes marquee { 
 
    0% { 
 
    -webkit-transform: translateX(100vw) 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(-100vw) 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts 
 
a certain amount of space from the total width, causing the others behind it to move faster.</a> 
 

 
</body> 
 

 
</html>

PS。不要忘記在上線之前爲動畫的其他供應商添加前綴。

來源

2015-10-16 22:04:12 GolezTrol

這是一個很棒的解決方案，謝謝！當我添加更多文本到線上時，我必須稍微調整一下，但我想這就是要點。 –

爲什麼我的CSS3選框動畫重新啓動？

回答

相關問題