為什么我的CSS3 Marquee Animation重新啟動？
[英]Why Does My CSS3 Marquee Animation Restart?
問題描述
所以我知道字幕動畫就像1999年那樣，但是我確實需要為我的項目滾動文本。
基本上，我有一個文本應該在瀏覽器窗口中一直滾動（視口？），並在屏幕外一直滾動到屏幕外，然后從頭開始重新啟動。 一個簡單的字幕。 但是，當我加載頁面時，文本僅滾動離開頁面的某些方式，然后重置為開始而不完成滾動。
這是我的代碼（鏈接文本來自我遇到的但已經解決的一個較早的問題。）
a { margin: auto; text-decoration: none; -webkit-animation: marquee 10s linear infinite; } @-webkit-keyframes marquee { 0% { -webkit-transform: translateX(1500px) } 100% { -webkit-transform: translateX(-500px) } }
<!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>
我嘗試過更改元素的定位屬性和動畫持續時間，但是似乎沒有什么能給我帶來如此渴望的結果？
1 個解決方案
解決方案1
0 已采納 2015-10-16 22:04:12
您可以使用vw ，它用於視口寬度。 盡管未添加百分號，但這是一個百分比。 因此100vw是視口寬度的100％。 然后，您可以從100％選框到-100％將文本從右移到左。 100vw表示文本從屏幕右側的右側開始。 -100vw表示文本移動到離開左側為止，假設標簽本身（最多）是屏幕的寬度（最多100vw）。
動畫的最終值應為元素寬度的負值。 例如，如果標簽的寬度為200px，則動畫的開始值仍應為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。 上線之前，請不要忘記為動畫的其他供應商添加前綴。
字幕與Css3動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.