为什么我的CSS3选框动画重新启动

所以我知道选框动画就像，太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>

我试过改变元素的定位属性和动画持续时间，但似乎没有什么给我的结果，我如此迫切的愿望?

您可以使用vw，这是viewport宽度。这是一个百分数，虽然不加百分号。所以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>

p。不要忘记在上线之前为动画添加其他供应商的前缀。

相关内容

最新更新

热门标签：