<div style="text-align: center; animation: 2s linear infinite spin">π</div>
<div style="text-align: center; animation: 6s linear infinite spin; transform: translatex(100%)">π</div>
Hmmmmmm that's not quite right, it disappears in the middle! Maybe we should try left-aligning it again.
<div style="animation: 6s linear infinite spin; transform: translatex(100%)">π</div>
That's better but it still kind of disappears jarringly at the left margin. How can we fix that? Normally we'd use translatex, but we're already using that to turn the spin animation into a horizontal movement. But maybe if we . . .
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
Look at that! We used a second, outer <div> to shift everything to the left! Also changed the 100% to 120% to make the distance a little bit wider than the window. Looking pretty smooth!
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center">πͺ</div>
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center; transform: rotate(-90deg)">πͺ</div>
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
Wondering what's going on with <div> and <span> and inline-block? @lexyeevee explains it all in this tutorial
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
WELP we added too many units of train track and it hit the margin and started wrapping around. But I bet there's a way we can fix this . . . .
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
We can hide the extra train tracks by setting the height of their <div> to 1.5rem, and setting the overflow property to "hidden". That's a bit better!
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center; width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
I tried to make the tracks extend off the sides of the viewing window by setting the width of their <div> to 120%. Curiously, this seems to only make them extend off the right side, even though the <div> is centered!
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">π</div>
</div>
<div style="text-align: center; transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
We'll just use our old friend the translate command to push it 10% to the left, and while we're at it we'll nudge it up 1.3rem so the train is no longer hovering in the air. But now we've got another problem . . . .
<div style="position: relative; z-index: 1; transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πππππππππ</div>
</div>
<div style="transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
We can put the train on top of the tracks by setting its position to "relative" and its z-index to 1. @lexyeevee explains it all in this tutorial. To make it extra obvious that the train is on top of the tracks instead of underneath them, I added some carriages. I also got rid of the text-align: center on the railroad tracks because we don't actually need it.
There's one new problem: the carriages abruptly vanish when the train hits the left margin. But we know how to solve this!
<div style="position: relative; z-index: 1; transform: translatex(-50%)">
<div style="animation: 6s linear infinite spin; transform: translatex(200%)">πππππππππ</div>
</div>
<div style="transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span><span style="display: inline-block; transform: rotate(-90deg)">πͺ</span>
</div>
We can widen the animation to 200% and then shove it 50% to the left. Looking spiffy!





