<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!
<div style="text-align: right; transform: translatex(10%)">
<div style="animation: 100s linear infinite spin; transform: translatex(-120%)">☁️</div>
</div>
<div style="text-align: right; transform: translatex(10%)">
<div style="animation: 130s linear infinite spin; transform: translatex(-120%)">☁️</div>
</div>
<div style="text-align: center; transform: translate(2rem, 1.2rem)">🌳🌳 🌳🌲🌲🌳🌳🌳🌳 🌳</div>
<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>
<div style="position: relative; z-index: 2; text-align: center; transform: translate(-2rem, -2.5rem)">🌳 🌲🌲 🌳🌲🌳🌳 🌳🌳🌳 🌳</div>
☁️
☁️
🌳🌳 🌳🌲🌲🌳🌳🌳🌳 🌳
🚂🚃🚃🚃🚃🚃🚃🚃🚃
🌳 🌲🌲 🌳🌲🌳🌳 🌳🌳🌳 🌳
At this point it's mostly just applying everything we already learned and kludging it around until it looks right. Or at least it looks right on my screen; who knows what kind of abomination yours is dishing up. It probably would have been more elegant for me to have adjusted the line-height instead of having to translate the trees so much on the y-axis but oh well. Notice 's in between them: that just stands for "non-breaking space", and it tells your browser not to squish them in close. The clouds are just the train animation with right and left switched.
You now have the tools to create all kinds of emoji screensavers: underwater, city streets, outer space, you name it! I'd love to see what you create! Cohost won't let you tag me directly, but if you tag your works #css animation they'll be easier for me to find.
This is true
