CSS Marquees

[IndigoGolem]

...but you can also do smoother marquees using CSS - this is the code the forum uses:

Code

<span class="marquee"><span>My scrolling text</span></span>

<style>
.marquee span {
    width: max-content;
    display: inline-block;
    animation: marquee 25s linear infinite;
    padding-left: 100%;
}

.marquee span:hover {
  animation-play-state: paused
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>

I'm trying to do some stuff with marquees* and i'm confused about it. I like this code better than how Firefox handles <marquee>, but i don't understand why the animation breaks if i change the display from inline-block to inline. Though that stopped mattering when i realized i need to make it position:absolute to fully fill the background.

When i use this same code in my site the image in the marquee jumps back to where it started when the animation finishes, instead of looping smoothly. I changed a few things like the timing and making it play on hover instead of pause on hover, but nothing that should break this. Maybe it's so smooth here because of some other styling that applies to <span> or <p>.

Has anyone figured out a way to make the marquee loop seamlessly instead of having a space? Repeating the image inside the inner <span> delays the problem but doesn't actually fix it.

My testing page is here. The box in the middle is to stop the background from scrolling when you hover over the middle of the page.


* Actual 3D spaces in CSS are hard so i'm trying to fake it with marquees that scroll to show a full 360° view of a space. Probably with either an image map or a CSS imitation image map for links.