为什么我的 CSS3 跑马灯动画会重新启动？

Question

所以我知道选取框动画完全是 1999 年的样子，但我的项目确实需要滚动文本。

基本上，我有一个文本应该在浏览器中一直滚动 window（视口？），并在开始时一直重新启动之前一直滚动到屏幕外。一个简单的选框。但是，当我加载页面时，文本只滚动了页面的一部分，然后在没有完成滚动的情况下重置到开头。

这是我的代码（link 文本来自我之前遇到但已经解决的问题。）

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>

我试过更改元素的定位属性和动画持续时间，但似乎没有什么能给我如此迫切想要的结果？

Answer 1

您可以使用 vw，它用于视口宽度。这是一个百分比，尽管您没有添加百分号。所以 100vw 是视口宽度的 100%。然后您可以从 100% 到 -100% 选取框以将文本从右移到左。 100vw 表示文本刚好从右侧屏幕外开始。 -100vw 表示文本移动直到离开左侧，假设 a 标签本身（最多）是屏幕的宽度（最多 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 跑马灯动画会重新启动？

Why Does My CSS3 Marquee Animation Restart?

html

css

marquee