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.

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?

Solution

You can use vw, which is for viewport width. This is a percentage, although you don't add a percent sign. So 100vw is 100% of the viewport width. You can then marquee from 100% to -100% to move the text from right to left. 100vw means the text starts just outside the screen on the right side. -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).

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.

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. Don't forget to add the prefixes for other vendors for the animation before go-live.