为什么我的CSS3 Marquee Animation重新启动？
[英]Why Does My CSS3 Marquee Animation Restart?
问题描述
So I know that marquee animations are like, sooo totally 1999, but I really need scrolling text for my project. 
所以我知道字幕动画就像1999年那样，但是我确实需要为我的项目滚动文本。
Basically, I have a text that should scroll all the way across the browser window (viewport?) and go all the way across and offscreen before restarting all the way at the beginning. 基本上，我有一个文本应该在浏览器窗口中一直滚动（视口？），并在屏幕外一直滚动到屏幕外，然后从头开始重新启动。 A simple marquee. 一个简单的字幕。 However, when I load the page, the text scrolls only some of the way off of the page, then resets to the beginning without completing the scroll. 但是，当我加载页面时，文本仅滚动离开页面的某些方式，然后重置为开始而不完成滚动。
Here's my code (the link text is from an earlier problem I was encountering but have already solved.) 这是我的代码（链接文本来自我遇到的但已经解决的一个较早的问题。）
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>
I've tried changing the positioning property of the elements and the animation duration but nothing seems to give me the results I so desperately desire? 我尝试过更改元素的定位属性和动画持续时间，但是似乎没有什么能给我带来如此渴望的结果？
1 个解决方案
解决方案1
0 已采纳 2015-10-16 22:04:12
You can use vw , which is for viewport width. 您可以使用vw ，它用于视口宽度。 This is a percentage, although you don't add a percent sign. 尽管未添加百分号，但这是一个百分比。 So 100vw is 100% of the viewport width. 因此100vw是视口宽度的100％。 You can then marquee from 100% to -100% to move the text from right to left. 然后，您可以从100％选框到-100％将文本从右移到左。 100vw means the text starts just outside the screen on the right side. 100vw表示文本从屏幕右侧的右侧开始。 -100vw means the text moves until it leaves the left side, assuming the a tag itself is (at most) the width of the screen (at most 100vw). -100vw表示文本移动到离开左侧为止，假设标签本身（最多）是屏幕的宽度（最多100vw）。
The end value of the animation should be negative the width of the element. 动画的最终值应为元素宽度的负值。 If, for example, your tag would be 200px wide, the start value of the animation should still be 100vw, but the end value should be -200px. 例如，如果标签的宽度为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. PS。 Don't forget to add the prefixes for other vendors for the animation before go-live. 上线之前，请不要忘记为动画的其他供应商添加前缀。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.